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

kohoh_ 发布于2019-04-23 13:12 / 3091人阅读

摘要：效果如图，通过定位放两张背景图，外层的放灰色的颗星图，内层的也是，宽度根据不同级别来展示，从而实现，代表半颗星，代表颗星，以此类推，即默认比如颗星乘就是的后缀数字，以此可以动态展示要注意这个星星默认为，间距，展示的星星宽度记得计算间距。

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1579.html

纯CSS的星级评价效果

摘要：代码实现一星两星三星四星五星去掉标签默认样式初始化样式鼠标悬浮精益求精上面我们的星星评分效果已初见成效，但是暴露了一个问题，就是我们的评价机制缺少记忆功能。这里有点不一样的是每个星星对应一个单选框和一个标签，的层级要高于单选框。前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 这种星星评价效果，相信大家这个并不陌生...

lijy91 2019-08-29 12:46 评论0 收藏0
纯CSS的星级评价效果

摘要：代码实现一星两星三星四星五星去掉标签默认样式初始化样式鼠标悬浮精益求精上面我们的星星评分效果已初见成效，但是暴露了一个问题，就是我们的评价机制缺少记忆功能。这里有点不一样的是每个星星对应一个单选框和一个标签，的层级要高于单选框。前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 这种星星评价效果，相信大家这个并不陌生...

Lin_R 2019-08-01 16:58 评论0 收藏0
PokemonGo：LBS游戏开发

摘要：优化后的方案降低了捕捉门槛，也鼓励用户走动去发现和捕捉更多精灵。写在前面去吧！皮卡丘！小时候拥有一台任天堂是多少熊孩子的梦想，每个夜晚被窝里透出的微弱光线，把小小的童年带入另一个世界，家门口的鸟和狗，森林里的虫和瀑布，山洞里的超音蝠，带着小小的梦，走过一个个城市，一路冒险，飞天潜水，攀瀑碎岩，所向披靡。每个醒来的清晨，都恍如出门冒险的那天~ 要做什么基于开放地图二次开发，完成简易...

daydream 2019-08-22 10:53 评论0 收藏0
PokemonGo：LBS游戏开发

摘要：优化后的方案降低了捕捉门槛，也鼓励用户走动去发现和捕捉更多精灵。写在前面去吧！皮卡丘！小时候拥有一台任天堂是多少熊孩子的梦想，每个夜晚被窝里透出的微弱光线，把小小的童年带入另一个世界，家门口的鸟和狗，森林里的虫和瀑布，山洞里的超音蝠，带着小小的梦，走过一个个城市，一路冒险，飞天潜水，攀瀑碎岩，所向披靡。每个醒来的清晨，都恍如出门冒险的那天~ 要做什么基于开放地图二次开发，完成简易...

Michael_Lin 2019-08-01 17:26 评论0 收藏0