宜宾网站建设公司

如何使用CSS绘制星级评分效果

这篇文章主要介绍“如何使用CSS绘制星级评分效果”，在日常操作中，相信很多人在如何使用CSS绘制星级评分效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用CSS绘制星级评分效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

目前创新互联已为近1000家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器托管、企业网站设计、江山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

先来看一下CSS绘制五角星的基本方法：

CSS Code复制内容到剪贴板

  1.     #star-five {   

  2.    margin: 50px 0;   

  3.    position: relative;   

  4.    display: block;   

  5.    color: red;   

  6.    width: 0px;   

  7.    height: 0px;   

  8.    border-right:  100px solid transparent;   

  9.    border-bottom: 70px  solid red;   

  10.    border-left:   100px solid transparent;   

  11.    -moz-transform:    rotate(35deg);   

  12.    -webkit-transform: rotate(35deg);   

  13.    -ms-transform:     rotate(35deg);   

  14.    -o-transform:      rotate(35deg);   

  15. }   

  16. #star-five:before {   

  17.    border-bottom: 80px solid red;   

  18.    border-left: 30px solid transparent;   

  19.    border-right: 30px solid transparent;   

  20.    position: absolute;   

  21.    height: 0;   

  22.    width: 0;   

  23.    top: -45px;   

  24.    left: -65px;   

  25.    display: block;   

  26.    content: "";   

  27.    -webkit-transform: rotate(-35deg);   

  28.    -moz-transform:    rotate(-35deg);   

  29.    -ms-transform:     rotate(-35deg);   

  30.    -o-transform:      rotate(-35deg);   

  31.   

  32. }   

  33. #star-five:after {   

  34.    position: absolute;   

  35.    display: block;   

  36.    color: red;   

  37.    top: 3px;   

  38.    left: -105px;   

  39.    width: 0px;   

  40.    height: 0px;   

  41.    border-right: 100px solid transparent;   

  42.    border-bottom: 70px solid red;   

  43.    border-left: 100px solid transparent;   

  44.    -webkit-transform: rotate(-70deg);   

  45.    -moz-transform:    rotate(-70deg);   

  46.    -ms-transform:     rotate(-70deg);   

  47.    -o-transform:      rotate(-70deg);   

  48.    content: "";   

  49. }  

有了这个基础，基本上星级评分的效果就容易实现了：
下图是Demo中会用到的图，可右键另存
如何使用CSS绘制星级评分效果

HTML Code

 

XML/HTML Code复制内容到剪贴板

  1.   

  2.                             1  

  3.                             

    4.   

  4.                             2  

  5.                             

    6.   

  6.                             3  

  7.                             

    8.   

  8.                             4  

  9.                             

    10.   

  10.                             5  

  11.                             

    12.   

  12.                           

CSS Code

 

CSS Code复制内容到剪贴板

  1. .rating {   

  2.     width: 124px;   

  3.     height: 19px;   

  4.     margin: 0 0 20px 0;   

  5.     padding: 0;   

  6.     list-style: none;   

  7.     clear: both;   

  8.     position: relative;   

  9.     background: url(http://www.zjgsq.com/wp-content/uploads/2014/09/stars.png) no-repeat 0 0;   

  10. }   

  11. .nostar {   

  12.     background-position: 0 0   

  13. }   

  14. .onestar {   

  15.     background-position: 0 -19px  

  16. }   

  17. .twostar {   

  18.     background-position: 0 -38px  

  19. }   

  20. .threestar {   

  21.     background-position: 0 -57px  

  22. }   

  23. .fourstar {   

  24.     background-position: 0 -76px  

  25. }   

  26. .fivestar {   

  27.     background-position: 0 -95px  

  28. }   

  29. ul.rating li {   

  30.     cursor: pointer;   

  31.     float: left;   

  32.     text-indent: -999em;   

  33. }   

  34. ul.rating li a {   

  35.     position: absolute;   

  36.     left: 0;   

  37.     top: 0;   

  38.     width: 25px;   

  39.     height: 19px;   

  40.     text-decoration: none;   

  41.     z-index: 200;   

  42. }   

  43. ul.rating li.one a {   

  44.     left: 0   

  45. }   

  46. ul.rating li.two a {   

  47.     left: 25px;   

  48. }   

  49. ul.rating li.three a {   

  50.     left: 50px;   

  51. }   

  52. ul.rating li.four a {   

  53.     left: 75px;   

  54. }   

  55. ul.rating li.five a {   

  56.     left: 100px;   

  57. }   

  58. ul.rating li a:hover {   

  59.     z-index: 2;   

  60.     width: 125px;   

  61.     height: 19px;   

  62.     overflow: hidden;   

  63.     left: 0;   

  64.     background: url(http://www.zjgsq.com/wp-content/uploads/2014/09/stars.png) no-repeat 0 0   

  65. }   

  66. ul.rating li.one a:hover {   

  67.     background-position: 0 -19px;   

  68. }   

  69. ul.rating li.two a:hover {   

  70.     background-position: 0 -38px;   

  71. }   

  72. ul.rating li.three a:hover {   

  73.     background-position: 0 -57px  

  74. }   

  75. ul.rating li.four a:hover {   

  76.     background-position: 0 -76px  

  77. }   

  78. ul.rating li.five a:hover {   

  79.     background-position: 0 -95px  

  80. }  

这样就基本实现了鼠标hover显示对应的星级，后面再增加点JS来实现click效果就可以啦

到此，关于“如何使用CSS绘制星级评分效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


分享名称：如何使用CSS绘制星级评分效果
文章地址：http://ybzwz.com/article/ghdegi.html

其他资讯