纯css实现星级评分

作者: MJ 分类: css 发布时间: 2019-07-10 17:11

最近用到一个五星评分的功能,其实找了很多都不太满意,正如本文要介绍的插件作者所说,找不到一个简单、易用的插件,所以自己造了一个轮子来实现了一个starability,除了基本的功能之外,还有各种动画,也是我遇到的最简单的使用办法,记录一下。

Starability.css

查看demo

使用方法:

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

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注