5分
但要保证这个 “外衣要穿着得体”，即裁剪得当，不要露怯为妙。
镂空星星周围的颜色要和进度条周围的融为一体，我这里都是白色，比较好混。
最后展示用的百分比和分输，配合上 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-gradual span.progress {
width: 0;
height: 100%;
display: block;
-webkit-border-radius: .15rem;
border-radius: .15rem;
-webkit-transition: width 1s ease-out;
-o-transition: width 1s ease-out;
transition: width 1s ease-out;
background: -webkit-gradient(linear, left top, right top, from(#f23f5c), to(#fea94e));
background: -o-linear-gradient(left, #f23f5c, #fea94e 100%);
background: linear-gradient(to right, #f23f5c, #fea94e 100%);
background: -webkit-linear-gradient(left, #f23f5c, #fea94e 100%);
}星星进度条
.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中实现一个评分星星效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
当前标题：怎么在css中实现一个评分星星效果-创新互联
文章出自：http://chengdu.cdxwcx.cn/article/cojhco.html
