CSS3 transform

最初这个效果是在Playnext.cn看到的，感觉挺好玩，今天就跟大家分享一下，用CSS3怎么来实现这个效果。 先来看下我做的demo Hello 二货 ，这个抖动效果的原理是通过元素小角度快速旋转和元素上下左右快速移动组合而成的，首先我们来了解两个个CSS3的知识点：transform、animation，下面我们逐一介绍一下这两个属性。

transform

从字面上讲是变形改变的意思，他包括：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）、matrix（矩阵变形），抖动效果中我们只用到了rotate和translate，它的语法是：

-*-transform : none | <transform-function> [ <transform-function> ]*

rotate 查看rotate Demo，代码：

<style>
#wrap{width:940px;margin:10px auto 0;padding:10px;border:1px solid #eee;border-radius:5px;}
.box{float:left;_display:inline;margin:100px 20px;width:160px;height:60px;line-height:60px;background:#EC870E;text-align:center;}
.rotateCW30{
	-webkit-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	transform:rotate(30deg);
}
.rotateCCW30{
	-webkit-transform:rotate(-30deg);
	-moz-transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	transform:rotate(-30deg);
}
</style>
<div id="wrap" class="clearfix">
	<div class="box">未旋转</div>
	<div class="box rotateCW30">顺时针旋转30度</div>
	<div class="box rotateCCW30">逆时针旋转30度</div>
</div>

其中的“30deg”代表旋转的角度即旋转30度，这里为正数所以是顺时针旋转30度，如果为负数则恰好相反是逆时针旋转30度。 translate 查看translate Demo，代码：

<style>
#wrap{margin:10px;padding:10px;border:1px solid #eee;border-radius:5px;}
.box{width:160px;height:90px;line-height:90px;background:#555;text-align:center;}
.mg30{margin:30px;}
.tsl{background:#EC870E;opacity:0.5;}
.tslR20{-webkit-transform:translate(20px,0);}
.tslL20{-webkit-transform:translate(-20px,0);}
.tslT20{-webkit-transform:translate(0,-20px);}
.tslB20{-webkit-transform:translate(0,20px);}
</style>
<div id="wrap" class="clearfix">
	<div class="box mg30 fl">
		<div class="box tsl">未移动</div>
	</div>
	<div class="box mg30 fl">
		<div class="box tsl tslR20">向右移动20px</div>
	</div>
	<div class="box mg30 fl">
		<div class="box tsl tslL20">向左移动20px</div>
	</div>
	<div class="box mg30 fl">
		<div class="box tsl tslT20">向上移动20px</div>
	</div>
	<div class="box mg30 fl">
		<div class="box tsl tslB20">向下移动20px</div>
	</div>
</div>

这里的translate(x,y)，其中x代表横轴移动距离，y代表纵轴移动距离，与left和top颇有相似之处。这里我只写了webkit内核浏览器的前缀，其它的前缀在demo页面中是有的。

animation

animation可以通过多种方式定义元素的属性值来实现更为复杂的动画，它的语法如下：

-*-animation:name duration timing-funcion delay iteration-count

其中name代表指定的关键帧名称；duration代表单次动画执行时间；timing-function代表执行的动画类型，比如linear；delay执行动画之前所延迟的时间；iteration-count代表动画执行的次数，infinite表示循环执行。 animation关键帧定义，直接看语法：

@-*-keyframes 关键帧名称{
	0% {}
	25% {定义元素需要执行的动画或者属性}
	50% {定义元素需要执行的动画或者属性}
	75% {定义元素需要执行的动画或者属性}
	100% {定义元素需要执行的动画或者属性}
}

关键帧的名称是可以自定义的，其中0%和100%代表动画的结束，25%、50%、75%代表动画分别执行到25%、50%、75%的时候所对应的需要执行的动画。 在线预览 animation Demo，代码如下：

<style>
.box{
	width:160px;
	height:90px;
	margin:20px;
	background:#8B0016;
	-webkit-animation:aniBox 3s linear 0s infinite;
}
@-webkit-keyframes aniBox{
	0%{margin:20px 20px;background:#8B0016;}
	25%{margin:80px 80px;background:#945305;}
	50%{margin:130px 130px;background:#FACE9C;}
	75%{margin:80px 80px;background:#945305;}
	100%{margin:20px 20px;background:#8B0016;}
}
</style>
<div class="box"></div>

知识点已经了解了，接下去就是把这些方法结合到一起。我的思路是这样的：给元素的hover事件定义一个animation，在它的动画关键帧里我分别定义0%、25%、50%、75%和100%时候的所执行的动画，这些动画都是使用了transform的rotate和translate属性来使元素小幅度的旋转并上下左右移动。通过定义animation的duration为0.1s，从而使这个效果快速的运行，从视觉上给眼睛一种它在抽风一样的抖动。 最后请看完整版Demo，代码如下：

<style>
h1{font-size:100%;}
body{background:#eee;}
.eh{position:absolute;top:50%;left:50%;margin:-75px 0 0 -200px;display:block;width:400px;height:150px;font:bold 40px/50px "\5FAE\8F6F\96C5\9ED1";cursor:pointer;}
.ehTitle{text-align:center;}
.ehArticel{text-align:right;font-size:16px;line-height:30px;}
.eh:hover {
	-webkit-animation:ianAn 0.1s linear 0s infinite;
	-moz-animation:ianAn 0.1s linear 0s infinite;
}
@-webkit-keyframes ianAn {
	0% {}
	25% {-webkit-transform: rotate(2deg) translate(-2.5px, -3px);}
	50% {-webkit-transform: rotate(-2deg) translate(-3px, -2.5px);}
	75% {-webkit-transform: rotate(2deg) translate(2.5px, -3px);}
	100% {-webkit-transform: rotate(-2deg) translate(-3px, 2.5px);}
}
@-moz-keyframes ianAn {
	0% {}
	25% {-moz-transform: rotate(2deg) translate(-2.5px, -3px);}
	50% {-moz-transform: rotate(-2deg) translate(-3px, -2.5px);}
	75% {-moz-transform: rotate(2deg) translate(2.5px, -3px);}
	100% {-moz-transform: rotate(-2deg) translate(-3px, 2.5px);}
}
</style>
<div class="eh">
	<h1 class="ehTitle">Hello 二货！</h1>
	<p class="ehArticel">Coming soon ! <br/>----iancj</p>
</div>