首页 程序猿 码农开发 浏览内容

CSS3抖动样式:CSS Shake

3048 0 BaiDu已收录 评论留言

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像):

CSS3抖动样式

CSS3抖动样式

这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。

这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动。

CSS Shake 使用方法:

首先引入css shake的样式表文件。

给你的DOM元素添加shake class样式。抖动样式,一共9种,可以看Demo的效果对应添加你想要的css。

另外我还能通过 .freeze, .shake-constant & .hover-stop 来控制状态,大家可以试试看效果!

Demo:http://elrumordelaluz.github.io/csshake/
Download:http://elrumordelaluz.github.io/csshake/css/csshake.min.css

注:Sass是一款前端CSS框架,它扩展了CSS3,增加了规则、变量、混入、选择器、继承等等特性。SASS是一种CSS的开发工具,生成良好格式化的CSS代码,并且还提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

标签:
墨月的头像
  • 本文由墨月网络整理编辑,转载请以链接形式注明本文地址:https://www.moyoo.net/10315.html
    版权所有© 墨月网络 | 本文采用 BY-NC-SA 进行授权丨发布于:2014-07-08 19:35
    若未注明,均为原创;部分内容源于网络,版权归原作者所有,如有侵权,请联系我们删除。
已有 0 条评论

关注我们,实时联系

AD