DIV CSS 佈局教程網

這篇文章主要介紹了使用CSS繪制星級評分效果的方法,當然要動態地使用鼠標點擊打分還需要使用JavaScript腳本,本文只講述繪制部分,需要的朋友可以參考下

先來看一下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);
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