效果
效果圖如下，純css實現超酷炫的星級評分動畫效果
實現思路
- 5個類型為radio的input，label標簽修改樣式背景圖為星星
- label標簽給每個星星鼠標停留時加注名字
- 點擊星星有放大旋轉的動畫
dom結構
用form實現
<form> <div class="star"> <input type="radio" id="rate5" name="rating" value="5"> <label for="rate5" title="Amazing"></label> <input type="radio" id="rate4" name="rating" value="4"> <label for="rate4" title="Good"></label> <input type="radio" id="rate3" name="rating" value="3"> <label for="rate3" title="Average"></label> <input type="radio" id="rate2" name="rating" value="2"> <label for="rate2" title="Not good"></label> <input type="radio" id="rate1" name="rating" value="1"> <label for="rate1" title="Terrible"></label> </div> </form>css樣式
css按步驟來實現，
1、星星圖片樣式
首先是星星圖片嘛~
.star{ display: block; position: relative; width: 150px; height: 60px; padding: 0; border: none; } .star > input{ position: absolute; margin-right: -100%; opacity: 0; } .star > label{ position: relative; display: inline-block; float: right; width: 30px; height: 30px; color: transparent; background-image: url("../rotate-star/images/starIcon.png"); background-repeat: no-repeat; }
2、點擊星星的時候，灰星星變黃星星，順便把input點擊的外邊框去掉，巨丑
.star > input:focus + label{ outline: none; } .star > input:checked~label, .star > input:focus~label, .star > input:hover~label{ background-position: 0 -30px; }
電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
3、通過before偽元素，新增一個隱藏着的星星，來做旋轉放大的動畫
.star > label:before{ display: none; position: absolute; content: " "; width: 30px; height: 30px; background-image: url("../rotate-star/images/starIcon.png"); background-repeat: no-repeat; bottom: 0; } .star > input:checked + label:before{ display: block; animation-name: rotateStar; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes rotateStar{ 0%{ transform: scale(1) rotate(0); } 95%{ transform: scale(4) rotate(90deg); opacity: 0; } 100%{ transform: scale(1) rotate(0); opacity: 0; } }
OK，按着步驟來，你也可以在你的頁面上實現酷炫的星級評分效果咯~