网站首页 Html5模版

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

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

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

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

　　这里要用到的就是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> //疯狂抖动