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

前端  /  管理员 发布于 7年前   246

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

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://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效果就可以啦

Demo