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

当前位置:主页 > CSS3库 > CSS3动画 > 炫酷纯CSS3星级评分动画特效
炫酷纯CSS3星级评分动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-30
    阅读:
麦子学院
简要教程

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

网友评论