前端时间做项目发现一抖动按钮挺吸引眼球的，研究了下实现原理，在此和大家分享下：
CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果（如下面的GIF图像）。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。
其中有前辈为大家编写好了csshake.css ，大家可以去参考下：http://www.webhek.com/misc/css-shake
Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，下面一起来看看介绍：
使用教程
首先引入css shake的样式表文件。
登录后复制
给你的DOM元素添加shake class样式
登录后复制
添加抖动样式，一共9种，也可以看DEMO对应添加即可
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
另外还能通过 .freeze, .shake-constant & .hover-stop 来控制状态，具体自己试下哦！接下来是我自己编写的一个鼠标放上停止抖动的小实验：最后，欢迎大家指出我的不足之处哟
登录后复制