纯css实现星级评分
最近用到一个五星评分的功能，其实找了很多都不太满意，正如本文要介绍的插件作者所说，找不到一个简单、易用的插件，所以自己造了一个轮子来实现了一个starability，除了基本的功能之外，还有各种动画，也是我遇到的最简单的使用办法，记录一下。
Starability.css
使用方法：
1：html
<fieldset class="starability-basic">
<legend>First rating:</legend>
<input type="radio" id="no-rate" class="input-no-rate" name="rating" value="0" checked aria-label="No rating." />
<input type="radio" id="first-rate1" name="rating" value="1" />
<label for="first-rate1" title="Terrible">1 star</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-rate3" name="rating" value="3" />
<label for="first-rate3" title="Average">3 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-rate5" name="rating" value="5" />
<label for="first-rate5" title="Amazing">5 stars</label>
</fieldset>2：css：我们可以引入所有的css（虽然不建议），也可以单独引入单独需要的效果样式
<head>
<link rel="stylesheet" type="text/css" href="css/starability-fade.min.css"/>
</head>
或
<head>
<link rel="stylesheet" type="text/css" href="css/starability-all.min.css"/>
</head>3：然后改变我们的class为对应的class
<fieldset class="starability-fade">注意事项：
如果是在移动端使用，可以禁止鼠标悬停的效果，以防止页面重绘，提高性能，具体方法就是移除样式：
.starability-fade > input:hover ~ label {
background-position: 0 -30px;
}原文：https://blog.lunarlogic.io/2016/starability-css-accessible-rating-with-animations-on-top/
github：https://github.com/LunarLogic/starability
npm：https://www.npmjs.com/package/starability
欢迎关注小程序，感谢您的支持！
