纳尼？什么星星外衣？好，直接上图比较能说清楚：
仔细看会发现规律：可以根据百分比/分值动态改变高亮星星的个数。
分步骤图：
这种效果，如果遇到一分一个星，没有半星（或者有也可以，直接加一个半星的类名）的情况，还可以通过添加多个结构实现。
但是再加上这星星都要渐变效果，我当时差点找设计谈谈去（当然是求人家改成不渐变啊）。
不过真的去的话，显得咱们太不专业了不是，好看的效果都实现不了，还叫什么前端。
乖乖坐下来看设计稿。
这么直接看的话，可能没有思路，不过可以换一种方式来思考：
先想想下边这种效果怎实现的？
怎么样，是不是看了这个，对于星星效果的实现也有了思路了已经？！好，解散。
哈哈，不过没有也没关系，可以先来看一下，这种进度条的实现。然后再从他身上找思路（这就是我开发时的思路了，很笨很“务实”）：
结构如下:
很简单的结构，主要核心代码如下：
<div class="grade-progress-bg">
<div class="grade-star-gradual">
<span class="progress" style=" 50%;"></span>
</div>
</div>
对应效果，直接来看结构模型比较清晰：
如图，
其中div.grade-star-gradual 负责灰色的背景条，
span.progress负责彩色的进度条
Div.grade-progress-bg负责包裹二者，并和右侧100%文案排列对齐用。
利用span.progress的百分比宽度占据灰色条的比例来模拟数据的百分比。就显得格外简单了。
彩色星星的实现：
利用这个思路，其实彩色进度条和彩色星星进度条就是差星星（这也是一句废话）
但关键思路点在于，不要把星星看做是进度条。
也就是说星星评分和一般的进度条效果实现起来一样。唯一的区别是有无星星。
那怎么把普通进度条加上星星呢？我的设计专业还是给了我一丝灵感：
只要在彩色进度条上边覆盖一个镂空的星星图案，看到的不就都是星星了吗？！
比如这样的：
黑色地方都是png透明图，在看图软件就是黑色的
换个软件截图，这样看明白吧，后边得马赛克就是png得透明底
然后实际这个进度条长这样：
披上华丽的外衣后长这样：
是不是感觉又赚了个大便宜！
代码设计上，还是和之前的进度条一样，背景色初始为灰色，星星盖在上边就是五个灰色的小星星
然后当有数据值得时候，改变彩色条span.progress的宽度为百分比即可实现视觉上星星个数的变化
结构上，也和进度条一致，但是为了这个镂空星星的“外衣”，我加了一个空结构做span的弟弟，也可以用一个伪元素随意发挥。
<div class="grade-progress-box">
<div class="grade-star-bg">
<div class="grade-star-gradual">
<span class="progress" style=" 100%;"></span>
<div class="grade-star-img bgsize"></div>//镂空星星图
</div>
</div>
<div class="grade-number grade-number1">5分</div>
</div>
但要保证这个“外衣要穿着得体”，即裁剪得当，不要露怯为妙。
镂空星星周围的颜色要和进度条周围的融为一体，我这里都是白色，比较好混。
最后展示用的百分比和分输，配合上vue的语法，很简单的就可以绑定展示。
至于从左向右的填充动态效果，只需要简单的使用css 的transition，监听width的改变即可。
2019-04-01 13:03:55补
后来有读者找上门问我，说还是看不明白镂空图得原理，这里我把我俩得截图贴一下，方便大家理解：
感谢这个小伙伴得疑问，补足一下我原来文章描述得不足~
结构：
普通进度条
.grade-progress-box
.grade-progress-bg
.grade-star-gradual #[span.progress(:style="{ (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;
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 {
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="{ (DBData.Sat/5*100).toFixed(0) + '%'}")]
.grade-star-img
.grade-number.grade-number1 {{DBData.Sat}}分
样式
.grade-star-bg {
position: relative;
display: table-cell;
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;
100%;
height: 100%;
background: url(data:image/png;base64,) no-repeat;
-webkit-background-size: 100% 100% !important;
background-size: 100% 100% !important;
}
好了，又搞定了一个。
==============================$_$==================================
2018-10-30 11:45:22 补充：
后来又遇到一个类似的评分星星效果，但是还用这个方法就死活不那么尽如人意了：
首先说不那么令人头痛的设计稿上：
这次与上次不同的是，背景不是纯白色的纯色，而是半透明。
透出来的底色有时候是白色，又时候又是蓝色的话，就不可能还用上一种做法的一个纯背景+镂空图覆盖了。
于是这次我用了两张图叠加，如下图：
底图是默认的灰色星星，然后彩色星星覆盖住灰色的，彩色被包裹在一个div中，控制div的宽度以达到漏出多少彩色星星的效果。
具体结构就是这样：
两个span分别是灰色星星和彩色星星做背景，中间div的宽度根据数据计算伸缩并超出隐藏。加之trasition的动画，一样达到了上边的那种效果。
自测、1.5, 2.5, 3分都完美展示。
好景不长，测试发现1.7、2.3分这样的半块的半块展示不好，
比如：
再比如：
该多了不多，该少了不少，左右不准有没有。
后来觉得是自己星星间距的问题，先说下星星间距和大小的关系：
然后就左右调试星星，出了这么多稿：
后来好不容易这种半块又半块的星搞定了后发现，整星又不行了。我崩溃到一键还原了，没有截图。
实在没办法了，在整星的基础上研究解决方法吧。因为你只有站在好的方向上再努力才会离成功更近：
我发现规律是
在半星的左边，比如1.2、1.3、1.4分就会不够，得出的宽度百分比小于正确展示时的百分比。
而半星的右边，如1.6、1.7、1.8计算出的宽度值又会多于实际应该展示的宽度值。
这种一个计算方式需要处理两种情况的情况，再纯用css就无法解决了。
于是我请除了js大哥出面处理：
var res = parseFloat((Number(this.gradeData[1]) / 5) * 100).toFixed(2);
var decade = parseInt(res / 10); //十位数 var unit = parseInt(res % 10); //个位数
if (unit !== 0) {
if (decade % 2 == 0) {//十位数为偶数
else {//十位数为奇数
计算属性的函数代码：
1 Sati: function(val) { 2 // 如果模十得0，表示整数，半星刚好，正常显示 3 // 如果十位数为偶数 左半颗星星 4 // 个位数： 5 // 为2 需要+ 4 6 // 4 + 3 7 // 6 + 2 8 // 8 + 1 9 // 如果十位数为奇数 右半颗星星 10 // 个位数： 11 // 为2 需要- 1 12 // 4 - 2 13 // 6 - 3 14 // 8 - 4 15 // this.Satisfaction = parseFloat(Number(this.gradeData[1]) / 5 * 100).toFixed(2); 16 var res = parseFloat((Number(this.gradeData[1]) / 5) * 100).toFixed(2); 17 var decade = parseInt(res / 10); //十位数 18 var unit = parseInt(res % 10); //个位数 19 console.log("原值", res,"十位数", decade, "个位", unit); 20 if (unit !== 0) { 21 // 不是正好半颗星或一颗星的情况 22 // console.log("非半星"); 23 if (decade % 2 == 0) { 24 //十位数为偶数 25 // console.log("十位数为偶数"); 26 switch (unit) { 27 case 2: 28 unit += 4; 29 break; 30 case 4: 31 unit += 3; 32 break; 33 case 6: 34 unit += 2; 35 break; 36 case 8: 37 unit += 1; 38 break; 39 } 40 } else { 41 //十位数为奇数 42 // console.log("十位数为奇数"); 43 switch (unit) { 44 case 2: 45 unit -= 1; 46 break; 47 case 4: 48 unit -= 2; 49 break; 50 case 6: 51 unit -= 3; 52 break; 53 case 8: 54 (unit -= 4); 55 break; 56 } 57 } 58 res = "" + decade + unit; 59 } 60 console.log("结果", res); 61 return res; 62 }
另外，平时用文字整理自己的思路真的有助于自己写逻辑。
我这个函数的逻辑就是先整理出下边这种现象描述，再照着编程的。使得思路很清晰不会编程的中途迷茫。
这也是在智能社视频中跟着blue老师学到的一招，安利一下智能社。
个人学习理解和总结，很多不足还请指正~
声明：
请尊重博客园原创精神，转载或使用图片请注明：
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/