推荐：好玩的CSS3抖动特效——Shake

推荐：好玩的CSS3抖动特效——Shake

发布时间：2016-01-30编辑：余斗文件大小：6KB阅读：(0)字号： 大 中 小

　　很久之前就在别人网站上看到这个抖动的特效，一直也想在自己博客上弄一个，昨天刚好看到一个CSS3教程说道这个特效，就在自己博客上实现了，看看效果吧：

　　

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

　　这个Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，一起来看一下吧。 实现方法也很简单，因为已经有了做好的CSS代码，我们只需要引入文件在需要抖动的地方调用即可。

　　使用教程

　　1.引入CSS shake样式表(文章结尾下载)


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

　　2.在需要抖动的元素块中加入shake的class属性


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

　　抖动样式一共有九种：


<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开控制状态。话不多说，点击预览来看一看吧。


抖动分类

特效选择