动起来！好玩的CSS抖动样式 – CSS Shake

http://www.shejidaren.com/css-shake-animation.html

动起来！好玩的CSS抖动样式 – CSS Shake

三月 13, 2014  发表于: HTML & CSS.  评论 (3)

CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果（如下面的GIF图像）。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。

这个Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，下面一起来看看介绍：

 

 

一共9个不同的抖动动画选择

 

使用教程

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

<link type="text/css" href="csshake.css">

给你的DOM元素添加shake class样式

<div class="shake"></div>

添加抖动样式，一共9种，也可以看DEMO对应添加即可

<div class="shake shake-hard"></div>

<div class="shake shake-slow"></div>

<div class="shake shake-little"></div>

<div class="shake shake-horizontal"></div>

<div class="shake shake.vertical"></div>

<div class="shake shake-rotate"></div>

<div class="shake shake-opacity"></div>

<div class="shake shake-crazy"></div>

另外我还能通过 .freeze, .shake-constant & .hover-stop 来控制状态，具体自己试下哦！

在线演示： DEMO
下载地址： CSS样式表 |  Github

推荐：查看最受欢迎的 301 个设计网站 →  http://hao.shejidaren.com
交流：结交更多有才华的设计师？请加入 UI设计QQ群，与50000名设计师交流设计。