星星评分样式

原创于 2019-06-26 16:40:48 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML和CSS技术实现动态显示产品或服务评分的方法。通过设置宽度百分比来显示不同评分等级的星星图标，实现了从前端直观展示评分的功能。此方法适用于电商平台、评论系统等需要展示用户评分的场景。

html：

 <div class="shop-star">
        <div class='star-after'>★★★★★</div>
        <--从后台取值设置宽度百分比来显示评分-->
        <div class='star-before' style="width:{{ item.score }}%;">★★★★★</div>
    </div>

css：

/* 星星评分封装 */
.star-after{
    color: #e2e2e2;
}
.star-before{
    color:#f19e38;
    position: absolute;
    left:0;
    top:0;
    overflow: hidden;
}