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

2018-11-09 02:33:33来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

<div class="star_evaluate">
       <span class="star star_10"></span>
</div>
.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,展示的星星宽度记得计算间距。

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

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端(2):CSS

下一篇:&lt;meta http-equiv=&quot;X-UA-Compatible&quot;