Erlo

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

时间:2018-11-08 17:32   阅读:24次   来源:博客园页面报错

<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,展示的星星宽度记得计算间距。

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

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

 

下一篇:前端(2):CSS

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“Erlo大厅”,在这发言所有人都可以看到。只保留当天信息

  • Erlo.vip2018-11-19 16:17:44Hello、欢迎使用Erlo大厅,这里是个吐槽的地方。
  • 首页 源码分享 新闻资讯 ERLO 搜索
    鼠标试试
    返回顶部