碎碎念ZWS

实现网站的图片、文字的动态效果，我们有photoshop制作多帧动画GIF、用flash制作更精巧的动画，还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果。然而，即使有这么多的方法可以实现动态效果，我们仍然觉得不满足，为什么呢？

制作网页动态效果的途径

1.用photoshop制作的动画，制作过程比较长，要产出一个比较理想、细腻的动画图片，花费的时间比较长，一旦需要修改某个部分，就得对源文件大开刀，伤身费脑力。

2.用flash制作动画，比用photoshop来得更专业一些，也高效许多，但文件一般都比较大，小流量、小存储的空间伤不起啊！

3.用javascript实现动态，这是个很实用、也很灵活的方法，大部分网站目前实现的动态效果超过30%使用javascript实现，而且比上述两者有更强的交互性，但在比较渣的网速下，运行js，会拖慢网站的加载速度（这也算缺点咩？）。

本文仅适合小白，大神请略过。

从本质上来说，其实碎碎念这么说纯属胡说，动态图片是网站素材，而动态效果属于网站交互，这尼玛能混为一谈么！！？？（额，专业人士来科普下吧，碎碎念编不下去了，呵呵呵呵呵呵呵~~）

好啦，以上纯属瞎编乱造，下面开始主菜，额，主题！本文适用于小白级别和不折腾不死星人，大神及代码恐惧症的，可以绕行啦~

用CSS3实现动态效果

用CSS3实现动态效果，只需要在你指定的div/section/aside等等块元素添加class，编写样式即可轻松实现，不占内存、不影响网站加载，修改灵活，还可多个场景共同使用！

提一下动态实现的过程吧：

设定动画animation效果名为doudong（改变角度），  
完成一次动画的时间为0.1s，
变化次数为无限制次infinite

就这样，我们完成了对相应木块动态效果的定义！为了达到动画循环和过渡自然，我们已经定义了一个无穷次变化，接下来还需要定义一个逆向变化，让动画可以反复变化，我们定义-webkit-animation-direction:alternate；这个是针对谷歌浏览器chrome来定义的，后续代码也是仅添加chrome兼容，firefox/opera的兼容代码就自己去拓展吧，多写一个，很简单的，对吧！

接下来，我们要对动画效果的具体实现进行描述，通过@keyframes doudong｛｝来声明动画的具体内容。我们细分了动画的过程从0%——100%为四段，五个节点，定义加载到这五个节点相应的样式即可实现。

这里的例子，通过定义背景的位置来实现抖动，注意，这里定义的样式是对称的，50%的前后是对称的，因为我们的动画是循环的，这样可以保证过渡的自然和效果的流畅。另外，实现动画的对象最好放置在一个DIV/SECTION或者其它标签的容器内，避免动画对象满屏跑（溢出）。

(用鼠标停留在碎碎念网站的导航条logo可以查看示例代码的效果哦！)

/*左右抖动*/  
.doudong{  
   /*变化一个周期5秒,变化次数infinite无穷次*/  
   animation:doudong .1s infinite;      
-webkit-animation:doudong .1s infinite; /* Safari and Chrome */  
   /*设置变化逆向alternate*/  
   -webkit-animation-direction:alternate;  
}  
@keyframes doudong /*  */  
   {  
0% {background-position:3px 0px;}  
25%{background-position:1.5px 0;}  
50% {background-position:0px 0;}  
75%{background-position:-1.5px 0;}  
100% {background-position:-3px 0px;}  
}  
@-webkit-keyframes doudong /* chrome */  
   {  
0% {background-position:3px 0px;}  
25%{background-position:1.5px 0;}  
50% {background-position:0px 0;}  
75%{background-position:-1.5px 0;}  
100% {background-position:-3px 0px;}  
}  

接下来，自己创建一个示例来体验下CSS3 animation 的魅力吧：

<div style="width: 120px; height: 120px; background: #EEE; color: #fff; overflow: hidden;margin:0 auto;">
	<section class="doudongshili"></section>
</div>

<style type="text/css">
  .doudongshili{
	  position:relative;
	  display:block;
	  margin:0;
	  width:100px;
	  height:100px;
	  background:url('http://gravatar.duoshuo.com/avatar/f346d356767f26fdfc04414980cc4eb4?s=256') no-repeat;
	  background-size: cover;
	  -webkit-animation:spin 5s infinite;
	  -moz-animation:spin 5s infinite;
	  animation:spin 5s infinite
}
@-webkit-keyframes spin{
  0%,100%{-webkit-transform:rotate(0deg) scale(1)}
  50%{-webkit-transform:rotate(1080deg) scale(0.1)}
}
@-moz-keyframes spin{
  0%,100%{-moz-transform:rotate(0deg) scale(1)}
  50%{-moz-transform:rotate(1080deg) scale(0.1)}
}
@-o-keyframes spin{
  0%,100%{-o-transform:rotate(0deg) scale(1)}
  50%{-o-transform:rotate(1080deg) scale(0.1)}
}
@keyframes spin{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(1080deg) scale(0.1)}
}
</style>

碎碎念费这么多口水，只讲这么点例子，希望可以起个抛砖引玉的效果，让大神们多科普科普CSS3的妙用，让未来的网站更具有高兼容性和轻量级！