纯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
欢迎关注小程序,感谢您的支持!