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

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

(一)请自行下载安装Dreamweaver

在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动画片段代码。