经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTMLCSS » CSS » 查看文章
css定位实现星级展示没有交互
来源:cnblogs  作者:蓓蕾心晴  时间:2018/11/9 10:59:29  对本文有异议
  1. <div class="star_evaluate">
  2. <span class="star star_10"></span>
  3. </div>
  1. .star_evaluate{
  2. position: relative;
  3. display: inline-block;
  4. width: 100px;
  5. height:16px;
  6. background: url("./../../public/img/star_gray.png") no-repeat;
  7. background-size:cover;
  8. overflow: hidden;
  9. .star{
  10. position: absolute;
  11. top:0;
  12. left:0;
  13. display: inline-block;
  14. height:16px;
  15. background: url("./../../public/img/star.png") no-repeat;
  16. background-size:cover;
  17. overflow: hidden;
  18. }
  19. .star_1{
  20. width:8px;
  21. }
  22. .star_2{
  23. width:21px;
  24. }
  25. .star_3{
  26. width:29px;
  27. }
  28. .star_4{
  29. width:42px;
  30. }
  31. .star_5{
  32. width:50px;
  33. }
  34. .star_6{
  35. width:63px;
  36. }
  37. .star_7{
  38. width:71px;
  39. }
  40. .star_8{
  41. width:84px;
  42. }
  43. .star_9{
  44. width:92px;
  45. }
  46. .star_10{
  47. width:100px;
  48. }
  49. }

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

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

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

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

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

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号