<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>多个CSS3实现的动画效果不错的星级评分效果</title><link rel="stylesheet" type="text/css" href="css/style.css"><link rel="stylesheet" type="text/css" href="css/starability.css"/></head><body><section><div class="starability-container"><h3>基本样式：</h3><form><fieldset class="starability-basic"> <legend>Basic star rating:</legend> <input type="radio" id="rate5-1" name="rating" value="5" /> <label for="rate5-1" title="Amazing">5 stars</label> <input type="radio" id="rate4-1" name="rating" value="4" /> <label for="rate4-1" title="Very good">4 stars</label> <input type="radio" id="rate3-1" name="rating" value="3" /> <label for="rate3-1" title="Average">3 stars</label> <input type="radio" id="rate2-1" name="rating" value="2" /> <label for="rate2-1" title="Not good">2 stars</label> <input type="radio" id="rate1-1" name="rating" value="1" /> <label for="rate1-1" title="Terrible">1 star</label></fieldset></form></div></section><section><div class="starability-container"><h3>向上滚动：slot</h3><form><fieldset class="starability-slot"> <legend>Basic star rating:</legend> <input type="radio" id="rate5-2" name="rating" value="5" /> <label for="rate5-2" title="Amazing">5 stars</label> <input type="radio" id="rate4-2" name="rating" value="4" /> <label for="rate4-2" title="Very good">4 stars</label> <input type="radio" id="rate3-2" name="rating" value="3" /> <label for="rate3-2" title="Average">3 stars</label> <input type="radio" id="rate2-2" name="rating" value="2" /> <label for="rate2-2" title="Not good">2 stars</label> <input type="radio" id="rate1-2" name="rating" value="1" /> <label for="rate1-2" title="Terrible">1 star</label></fieldset></form></div></section><section><div class="starability-container"><h3>发光动画：grow</h3><form><fieldset class="starability-grow"> <legend>Basic star rating:</legend> <input type="radio" id="rate5-3" name="rating" value="5" /> <label for="rate5-3" title="Amazing">5 stars</label> <input type="radio" id="rate4-3" name="rating" value="4" /> <label for="rate4-3" title="Very good">4 stars</label> <input type="radio" id="rate3-3" name="rating" value="3" /> <label for="rate3-3" title="Average">3 stars</label> <input type="radio" id="rate2-3" name="rating" value="2" /> <label for="rate2-3" title="Not good">2 stars</label> <input type="radio" id="rate1-3" name="rating" value="1" /> <label for="rate1-3" title="Terrible">1 star</label></fieldset></form></div></section><section><div class="starability-container"><h3>发光并旋转：growRotate</h3><form><fieldset class="starability-growRotate"> <legend>Basic star rating:</legend> <input type="radio" id="rate5-4" name="rating" value="5" /> <label for="rate5-4" title="Amazing">5 stars</label> <input type="radio" id="rate4-4" name="rating" value="4" /> <label for="rate4-4" title="Very good">4 stars</label> <input type="radio" id="rate3-4" name="rating" value="3" /> <label for="rate3-4" title="Average">3 stars</label> <input type="radio" id="rate2-4" name="rating" value="2" /> <label for="rate2-4" title="Not good">2 stars</label> <input type="radio" id="rate1-4" name="rating" value="1" /> <label for="rate1-4" title="Terrible">1 star</label></fieldset></form></div></section><section><div class="starability-container"><h3>淡入淡出：fade</h3><form><fieldset class="starability-fade"> <legend>Basic star rating:</legend> <input type="radio" id="rate5-5" name="rating" value="5" /> <label for="rate5-5" title="Amazing">5 stars</label> <input type="radio" id="rate4-5" name="rating" value="4" /> <label for="rate4-5" title="Very good">4 stars</label> <input type="radio" id="rate3-5" name="rating" value="3" /> <label for="rate3-5" title="Average">3 stars</label> <input type="radio" id="rate2-5" name="rating" value="2" /> <label for="rate2-5" title="Not good">2 stars</label> <input type="radio" id="rate1-5" name="rating" value="1" /> <label for="rate1-5" title="Terrible">1 star</label></fieldset></form></div></section><section><div class="starability-container"><h3>选择框效果：checkmark</h3><form><fieldset class="starability-checkmark"> <legend>Basic star rating:</legend> <input type="radio" id="rate5-6" name="rating" value="5" /> <label for="rate5-6" title="Amazing">5 stars</label> <input type="radio" id="rate4-6" name="rating" value="4" /> <label for="rate4-6" title="Very good">4 stars</label> <input type="radio" id="rate3-6" name="rating" value="3" /> <label for="rate3-6" title="Average">3 stars</label> <input type="radio" id="rate2-6" name="rating" value="2" /> <label for="rate2-6" title="Not good">2 stars</label> <input type="radio" id="rate1-6" name="rating" value="1" /> <label for="rate1-6" title="Terrible">1 star</label></fieldset></form></div></section></body></html>
评论