动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～

简单css动画片段代码(最终效果 )

（一）请自行下载安装Dreamweaver

链接：http://rj.baidu.com/soft/detail/24405.html?ald（win）

链接：http://www.sdifenzhou.com/dreamweaver-cs6-mac.html（mac）

在Dreamweaver编写代码（如需参考请复制下列代码）

（二）HTML CSS代码详解

css代码（/*详解*/）

```

@-webkit-keyframes rotate{

from{-webkit-transform:rotate(0deg);}

to{-webkit-transform:rotate(360deg);}

}

@-webkit-keyframes top{

from{top:0;}

to{top:-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;

}

.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代码

   

(三)录视频及动图gif小软件Droplr，请自行App Store下载（免费但需注册）

Droplr图标

工具非常棒推荐使用，我尝试了几个录gif的小软件（如licecap、Gifrocket），个人推荐Droplr注意：这部分要注册才可以使用截屏和录屏功能

请继续关注，下节课会分享难度级别较高的CSS3动画片段代码。