使用使用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);
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中会用到的图，可右键另存
