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