主页 / 建站知识 /

使用CSS绘制星级评分效果的方法

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

先来看一下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.    : -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.    : 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中会用到的图，可右键另存

HTML Code

 

XML/HTML Code复制内容到剪贴板
  1. <ul class="rating nostar">  
  2.                             <li class="one"><a href="#" title="1 Star">1</a>  
  3.                             </li>  
  4.                             <li class="two"><a href="#" title="2 Stars">2</a>  
  5.                             </li>  
  6.                             <li class="three"><a href="#" title="3 Stars">3</a>  
  7.                             </li>  
  8.                             <li class="four"><a href="#" title="4 Stars">4</a>  
  9.                             </li>  
  10.                             <li class="five"><a href="#" title="5 Stars">5</a>  
  11.                             </li>  
  12.                         </ul>  

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://.zjgsq./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.     : 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://.zjgsq./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伪元素实现文字部分变色的方法

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by