css定位实现星级展示没有交互

代码语言：javascript复制

<div class="star_evaluate">
       <span class="star star_10"></span>
</div>

代码语言：javascript复制

.star_evaluate{
            position: relative;
            display: inline-block;
            width: 100px;
            height:16px;
            background: url("./../../public/img/star_gray.png") no-repeat;
            background-size:cover;
            overflow: hidden;
            .star{
              position: absolute;
              top:0;
              left:0;
              display: inline-block;
              height:16px;
              background: url("./../../public/img/star.png") no-repeat;
              background-size:cover;
              overflow: hidden;
            }
            .star_1{
              width:8px;
            }
            .star_2{
              width:21px;
            }
            .star_3{
              width:29px;
            }
            .star_4{
              width:42px;
            }
            .star_5{
              width:50px;
            }
            .star_6{
              width:63px;
            }
            .star_7{
              width:71px;
            }
            .star_8{
              width:84px;
            }
            .star_9{
              width:92px;
            }
            .star_10{
              width:100px;
            }
          }

效果如图，通过定位放两张背景图，外层的放灰色的5颗星图，内层的也是，宽度根据不同级别来展示，从而实现，

star_1 ,代表半颗星，star_2 代表1颗星，以此类推，即默认比如2.5颗星乘2就是class的后缀数字，以此可以动态展示

要注意这个星星默认为16px*16px，间距5px，展示的星星宽度记得计算间距。

之前看过网友的实现方式，有通过一个星星平铺，来显示的，但是平铺的这种方式应该是不可以让星星之间产生间距的，如果有大神有办法，请一定告诉我，谢谢！

如有写的不对的地方，还请大家多多指正，感谢查看！

lua

0 人点赞