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

使用CSS绘制星级评分效果的方法,第1张

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

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

CSS Code复制内容到剪贴板
  1.     #star-five {   
  2.    margin50px 0;   
  3.    positionrelative;   
  4.    displayblock;   
  5.    colorred;   
  6.    width0px;   
  7.    height0px;   
  8.    border-right:  100px solid transparent;   
  9.    border-bottom70px  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-bottom80px solid red;   
  18.    border-left30px solid transparent;   
  19.    border-right30px solid transparent;   
  20.    positionabsolute;   
  21.    height: 0;   
  22.    width: 0;   
  23.    top: -45px;   
  24.    left: -65px;   
  25.    displayblock;   
  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.    positionabsolute;   
  35.    displayblock;   
  36.    colorred;   
  37.    top3px;   
  38.    left: -105px;   
  39.    width0px;   
  40.    height0px;   
  41.    border-right100px solid transparent;   
  42.    border-bottom70px solid red;   
  43.    border-left100px 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.     width124px;   
  3.     height19px;   
  4.     margin: 0 0 20px 0;   
  5.     padding: 0;   
  6.     list-stylenone;   
  7.     clearboth;   
  8.     positionrelative;   
  9.     backgroundurl(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.     cursorpointer;   
  31.     floatleft;   
  32.     text-indent: -999em;   
  33. }   
  34. ul.rating li a {   
  35.     positionabsolute;   
  36.     left: 0;   
  37.     top: 0;   
  38.     width25px;   
  39.     height19px;   
  40.     text-decorationnone;   
  41.     z-index: 200;   
  42. }   
  43. ul.rating li.one a {   
  44.     left: 0   
  45. }   
  46. ul.rating li.two a {   
  47.     left25px;   
  48. }   
  49. ul.rating li.three a {   
  50.     left50px;   
  51. }   
  52. ul.rating li.four a {   
  53.     left75px;   
  54. }   
  55. ul.rating li.five a {   
  56.     left100px;   
  57. }   
  58. ul.rating li a:hover {   
  59.     z-index: 2;   
  60.     width125px;   
  61.     height19px;   
  62.     overflowhidden;   
  63.     left: 0;   
  64.     backgroundurl(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效果就可以啦

Demo

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/619266.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-15
下一篇 2022-04-15

发表评论

登录后才能评论

评论列表(0条)

保存