這篇文章主要介紹了使用CSS繪制星級評分效果的方法,當然要動態地使用鼠標點擊打分還需要使用JavaScript腳本,本文只講述繪制部分,需要的朋友可以參考下
先來看一下CSS繪制五角星的基本方法:
CSS Code復制內容到剪貼板
- #star-five {
- margin: 50px 0;
- position: relative;
- display: block;
- color: red;
- width: 0px;
- height: 0px;
- border-right: 100px solid transparent;
- border-bottom: 70px solid red;
- border-left: 100px solid transparent;
- -moz-transform: rotate(35deg);
- -webkit-transform: rotate(35deg);
- -ms-transform: rotate(35deg);
- -o-transform: rotate(35deg);
- }
- #star-five:before {
- border-bottom: 80px solid red;
- border-left: 30px solid transparent;
-