动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 )
（一）请自行下载安装Dreamweaver
在Dreamweaver编写代码（如需参考请复制下列代码）
（二）HTML CSS代码详解
css代码（/*详解*/）
```
@-webkit-keyframes rotate{
<!--/*@keyframes(关键帧)，前缀webkit表示这个动画效果只适用于webkit内核的浏览器， rotate top bottom 就是这个动画里关键帧的名字（animation-name）*/-->
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
<!--/*从0到360度旋转*/-->
@-webkit-keyframes top{
from{top:0;}
to{top:-20%}
<!--/*蓝色小球 垂直位移 从0到－20%*/-->
}
@-webkit-keyframes bottom{
from{bottom:0;}
to{bottom:-20%}
}
body{
background:#333;
overflow:hidden;
}
#container{
position:absolute;
left:50%; top:50%;
width:120px;
height:120px;
margin:-50px 0 0 -50px;
-webkit-animation: rotate linear 3.2s infinite;
}
<!--/*-webkit-animation详解链接http://www.cnblogs.com/happyPawpaw/archive/2012/09/12/2681348.html */-->
.sphere{
position: obsolute;
}
.sphere:before{
top: 0;
border-radius: 30px 30px 30px 30px;
background: skyblue;
content: '';
position: absolute;
left:25%;
width: 50%;
.sphere:after{
bottom:0;
border-radius: 30px 30px 30px 30px;
background: tomato;
content: '';
position: absolute;
left:25%;
width: 50%;
height: 50%;
infinite;
-webkit-animation: bottom ease .8s alternate infinite;
}
```
html代码
<body>
<div id="container">
<div class="sphere s-1"></div>
</div>
</body>
(三)录视频及动图gif小软件Droplr，请自行App Store下载（免费但需注册）
Droplr图标
工具非常棒推荐使用，我尝试了几个录gif的小软件（如licecap、Gifrocket），个人推荐Droplr注意：这部分要注册才可以使用截屏和录屏功能
请继续关注，下节课会分享难度级别较高的CSS3动画片段代码。
