前端-css，五角星打分

tl110110tl

已于 2022-06-29 11:13:18 修改

阅读量1.5k

点赞数 2

分类专栏：前端文章标签： css

于 2022-04-01 19:10:01 首次发布

本文链接：https://blog.csdn.net/tl110110tl/article/details/123905254

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

想展示这样的五角星。

思路：

展示2个大小、位置（位置一样可以用postion定位，这样后面压住前面）、一模一样的图片【可以用盒子模型包装，也可以用背景】。

被压住的图片，画的是5颗白色空星星。

在上面负责压住的图片，展示的是5颗金色的星星

最后，控制金色星星所在盒子的宽度，实现此现象

这是原图

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.box{
			width: 300px;
			margin: 100px auto;
			position: relative;
		}
		.box span {
			position: absolute;
			top:0;
			left:0;
			display: block;
			width: 180px;
			height: 24px;
			background: url(images/pingfen.png) no-repeat ;
		}
		.box .one{
			background-position : 0 -24px ;
		}
		.box .two{
			background-position : 0 -60px ;
		}
	</style>
</head>
<body>
	<div class="box">
		<span class="one"></span>
		<span class="two"></span>
	</div>
</body>
</html>
<script type="text/javascript">
	var two = document.getElementsByClassName("two")[0];
	// 图片width总长度180，分5份，每份36 px
	// 用户打分3.5如下
	two.style.width = 3.5* two.offsetWidth/5  + "px";
</script>

结果如图：