其他代码
炫酷纯CSS3星级评分动画特效
PetitQ
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-basicstarability-slotstarability-growstarability-growRotatestarablity-fadestarability-checkmark
该星级评分特效兼容 IE10+的所有现代浏览器，如果你需要支持旧版本的 IE 浏览器，可以使用 Modernizr 等工具来禁用动画。
Github 地址：https://github.com/LunarLogic/starability
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
