怎么在css中实现一个评分星星效果
本篇文章为大家展示了怎么在css中实现一个评分星星效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
结构如下:
很简单的结构，主要核心代码如下：
<divclass="grade-progress-bg"> <divclass="grade-star-gradual"> <spanclass="progress"style="width:50%;"></span> </div> </div>
对应效果，直接来看结构模型比较清晰：
如图，
其中 div.grade-star-gradual 负责灰色的背景条，
span.progress负责彩色的进度条
Div.grade-progress-bg负责包裹二者，并和右侧100%文案排列对齐用。
利用 span.progress的百分比宽度占据灰色条的比例来模拟数据的百分比 。就显得格外简单了。
彩色星星的实现 ：
利用这个思路，其实彩色进度条和彩色星星进度条就是差星星 （这也是一句废话）
但关键思路点在于， 不要 把星星看做是进度条 。
也就是说星星评分和一般的进度条效果实现起来一样。唯一的区别是有无星星。
那怎么把普通进度条加上星星呢？我的设计专业还是给了我一丝灵感：
只要在彩色进度条上边覆盖一个镂空的星星图案，看到的不就都是星星了吗？！
比如这样的：
然后实际这个进度条长这样：
披上华丽的外衣后长这样：
是不是感觉又赚了个大便宜！
代码设计上，还是和之前的进度条一样，背景色初始为灰色，星星盖在上边就是五个灰色的小星星
然后当有数据值得时候， 改变彩色条 span.progress的宽度为百分比即可实现视觉上星星个数的变化
结构上，也和进度条一致，但是为了这个镂空星星的 “外衣”，我加了一个空结构做span的弟弟，也可以用一个伪类随意发挥。
<divclass="grade-progress-box"> <divclass="grade-star-bg"> <divclass="grade-star-gradual"> <spanclass="progress"style="width:100%;"></span> <divclass="grade-star-imgbgsize"></div>//镂空星星图 </div> </div> <divclass="grade-numbergrade-number1">5分</div> </div>
但要保证这个 “外衣要穿着得体”，即裁剪得当，不要露怯为妙。
镂空星星周围的颜色要和进度条周围的融为一体，我这里都是白色，比较好混。
最后 展示用的百分比 和分输，配合上 vue的语法，很简单的就可以绑定展示。
至于 从左向右的填充动态效果 ，只需要简单的使用css的transition，监听width的改变即可。
普通进度条
.grade-progress-box
.grade-progress-bg
.grade-star-gradual#[span.progress(:style="{width:(Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(0)+'%'}")]
.grade-number{{(Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(2)}}%样式
grade-progress-box:after{
content:"";
display:block;
clear:both;
visibility:hidden;
overflow:hidden;
}
.grade-progress-bg{
display:table-cell;
vertical-align:middle;
width:4.3rem;
height:.14rem;
overflow:hidden;
}
.grade-star-gradual{
height:0.16rem;
-webkit-border-radius:.15rem;
border-radius:.15rem;
overflow:hidden;
background:#e5e5e5;
}
.grade-star-gradualspan.progress{
width:0;
height:100%;
display:block;
-webkit-border-radius:.15rem;
border-radius:.15rem;
-webkit-transition:width1sease-out;
-o-transition:width1sease-out;
transition:width1sease-out;
background:-webkit-gradient(linear,lefttop,righttop,from(#f23f5c),to(#fea94e));
background:-o-linear-gradient(left,#f23f5c,#fea94e100%);
background:linear-gradient(toright,#f23f5c,#fea94e100%);
background:-webkit-linear-gradient(left,#f23f5c,#fea94e100%);
}星星进度条
.grade-progress-box
.grade-star-bg
.grade-star-gradual#[span.progress(:style="{width:(DBData.Sat/5*100).toFixed(0)+'%'}")]
.grade-star-img
.grade-number.grade-number1{{DBData.Sat}}分样式
.grade-star-bg{
position:relative;
display:table-cell;
width:4.46rem;
height:.5rem;
overflow:hidden;
margin-right:.22rem;
vertical-align:middle;
}
.grade-star-gradual{
height:0.16rem;
-webkit-border-radius:.15rem;
border-radius:.15rem;
overflow:hidden;
background:#e5e5e5;
}
.grade-star-bg.grade-star-gradual{
height:100%;
}
.grade-star-img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(data:image/png;base64,)no-repeat;
-webkit-background-size:100%100%!important;
background-size:100%100%!important;
}上述内容就是怎么在css中实现一个评分星星效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注恰卡编程网行业资讯频道。
