炫酷纯CSS3星级评分动画特效

starability.css是一款炫酷纯CSS3星级评分动画特效。该特效中共有6种不同的星级评分动画效果，分别是滑动动画，淡入淡出动画，旋转动画，发光动画和复选框动画。

该星级评分特效使用纯HTML和CSS来制作，你甚至可以使用键盘来访问控制评分，屏幕阅读器也能够阅读出当前选择的评分。

需要注意的是，该星级评分特效只是提供了星级的样式和动画，如果你需要后台可以获取用户当前选择的星星数量，还自己需要额外编写一些代码来实现。

使用方法

在页面中引入starability-all.min.css文件，或者你只需要某种动画，可以只引入该动画相应的CSS文件。

<link rel="stylesheet" type="text/css" href="starability-minified/starability-all.min.css"/>                  
                

HTML结构

使用下面的HTML结构来制作星级评分特效，注意，如果你在一个页面中使用多个评分组件，那么radio按钮的ID号必须不同。

<fieldset class="starability-basic">
  <legend>First rating:</legend>
  <input type="radio" id="first-rate5" name="rating" value="5" />
  <label for="first-rate5" title="Amazing">5 stars</label>
  <input type="radio" id="first-rate4" name="rating" value="4" />
  <label for="first-rate4" title="Very good">4 stars</label>
  <input type="radio" id="first-rate3" name="rating" value="3" />
  <label for="first-rate3" title="Average">3 stars</label>
  <input type="radio" id="first-rate2" name="rating" value="2" />
  <label for="first-rate2" title="Not good">2 stars</label>
  <input type="radio" id="first-rate1" name="rating" value="1" />
  <label for="first-rate1" title="Terrible">1 star</label>
</fieldset>

<fieldset class="starability-basic">
  <legend>Second rating:</legend>
  <input type="radio" id="second-rate5" name="rating" value="5" />
  <label for="second-rate5" title="Amazing">5 stars</label>
  <input type="radio" id="second-rate4" name="rating" value="4" />
  <label for="second-rate4" title="Very good">4 stars</label>
  <input type="radio" id="second-rate3" name="rating" value="3" />
  <label for="second-rate3" title="Average">3 stars</label>
  <input type="radio" id="second-rate2" name="rating" value="2" />
  <label for="second-rate2" title="Not good">2 stars</label>
  <input type="radio" id="second-rate1" name="rating" value="1" />
  <label for="second-rate1" title="Terrible">1 star</label>
</fieldset>                 
                

CSS样式

各种不同的动画通过在<fieldset>元素上添加不同的CLASS类来实现。

<fieldset class="starability-fade"></fieldset>              
                

星星使用图片来制作，在CSS文件中使用相对路径来引用它们，../images/icons.png。你可以使用自己的图片来替代它们。

可用的星级评分动画的CLASS类有：

• starability-basic
• starability-slot
• starability-grow
• starability-growRotate
• starablity-fade
• starability-checkmark

浏览器兼容

该星级评分特效兼容IE10+的所有现代浏览器，如果你需要支持旧版本的IE浏览器，可以使用Modernizr等工具来禁用动画。

starability.css星级评分特效的github地址为：https://github.com/LunarLogic/starability。