介绍 & lt; div 类=癵rade-progress-bg"比;
,,,& lt; div 类=癵rade-star-gradual"比;
,,,,,,,& lt; span 类=皃rogress",风格=翱矶?,50%;“祝辞& lt;/span>
,,,& lt;/div>
& lt;/div> .grade-progress-box
.grade-progress-bg才能
,,,.grade-star-gradual #【span.progress(:风格=皗宽度:,(号码(DBData.Inv) * 100在100 ? 100:数量(DBData.Inv) * 100) .toFixed (0), +, & # 39; % & # 39;}“))
.grade-number 才能,{{((DBData.Inv) * 100在100 ? 100:数量(DBData.Inv) * 100) .toFixed (2)}} %
本篇文章为大家展示了怎么在css中实现一个评分星星效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
结构如下:
很简单的结构,主要核心代码如下:
对应效果,直接来看结构模型比较清晰:
然后实际这个进度条长这样:
披上华丽的外衣后长这样:
是不是感觉又赚了个大便宜!
代码设计上,还是和之前的进度条一样,背景色初始为灰色,星星盖在上边就是五个灰色的小星星
& lt; div 类=癵rade-progress-box"比;
,,,& lt; div 类=癵rade-star-bg"比;
,,,,,& lt; div 类=癵rade-star-gradual"比;
,,,,,,,& lt; span 类=皃rogress",风格=翱矶?,100%;“祝辞& lt;/span>
,,,,,,,& lt; div 类=癵rade-star-img bgsize"祝辞& lt;/div>//镂空星星图
,,,,,& lt;/div>
,,& lt;/div>
,,,& lt; div 类=癵rade-number grade-number1"在5分& lt;/div>
& lt;/div>
但要保证这个“外衣要穿着得体”,即裁剪得当,不要露怯为妙。
镂空星星周围的颜色要和进度条周围的融为一体,我这里都是白色,比较好混。
最后<强>展示用的百分比强和分输、配合上vue的语法,很简单的就可以绑定展示。
至于<强>从左向右的填充动态效果强,只需要简单的使用css 的过渡,监听宽度的改变即可。
普通进度条
