CSS3的动画功能十分强大，大部分的动画都可以通过CSS3的设置来进行完成。这里将之前写过的CSS3动画图标拿出来分享，希望能给大家提供点帮助。
先是以CSS3的旋转风扇为例，来讲一下实现思路与方法。
一、实现思路
首先要构建一个风扇的结构，用CSS将风扇的背景，风扇的4个叶片，与中间的轴心都描绘出来。然后再将叶片用CSS3动画进行中心点旋转，设置好动画后就可以了。
二、实现方法
1、首先是背景轮廓的绘制
先是用div生成一个圆，将它用白色设置好背景
.bolang_div {
display:inline-block;
position: absolute;
top:300px;
left:500px;
width:284px;
height:300px;
background:#fff;
border-radius: 35px;
overflow:hidden;
-webkit-transition: 1s all;
}
在这个基础上绘制它的内圆
/* 中间圆形底色 */
.box-anim:before {
content:"";
border-radius:50%;
display:inline-block;
position:absolute; width:190px; height:190px;
margin:-95.5px 0 0 -95.5px;
z-index:1001;
background:-webkit-radial-gradient(#63ec57, #218644);
top:50%; left:50%;
-webkit-box-shadow:
0 12px 18px -1px rgba(0,0,0,0.2) inset;
}
然后是内圆的底色
.box-anim:after {
content:"";
border-radius:50%;
display:inline-block;
position:absolute; width:200px; height:200px;
margin:-100px 0 0 -100px;
z-index:1000;
background:-webkit-linear-gradient(bottom ,#fff,#dddddd);
top:50%; left:50%;
}
绘制完成后样式变成下图：
内部的渐变色的样式可以修改
2、内部轴心的颜色与样式，设置中间圆形
.box-anim > .box-center {
border-radius:50%;
display:inline-block;
position:absolute; width:50px; height:50px;
margin:-25px 0 0 -25px;
z-index:1004;
background:-webkit-radial-gradient(#fff,#c4daca);
top:50%; left:50%;
-webkit-box-shadow:
5px 8px 8px -1px #cadbce inset;
-webkit-transform: rotate(-90deg);
}
.box-anim > .box-center:after {
content: "";
border-radius:50%;
display:inline-block;
position:absolute; width:50px; height:50px;
margin:-25px 0 0 -25px;
z-index:1005;
background:transparent;
top:50%; left:50%;
-webkit-box-shadow:
0px 3px 8px rgba(0,0,0,0.2) ;
-webkit-transform: rotate(90deg);
}
然后的效果如下：
3、叶片的绘制与实现，这里有个外部容器，来存放叶片的内容，方便进行CSS动画的旋转与设置。转动这个div就可以实现叶片的转动。
先是不加上动画设置，首先让它在轴之下的层级，然后居中浮动。
.ro45 {
width: 100px;
height: 100px;
position: absolute;
z-index:1003;
top:50%; left:50%;
margin-left:-50px;
margin-top:-50px;
｝
而叶片分成了两个DIV，一个实现叶片成对的出现后，另一个旋转90度就可以实现对称
单独的叶片其实就是一个水滴开状的元素，用CSS很容易就能实现
.infinity {
width: 220px;
height: 100px;
position: absolute;
z-index:1003;
top:50%; left:50%;
margin-left:-70px;
margin-top:-70px;
}
.infinity:before,.infinity:after {
content: "";
width: 70px;
height: 70px;
position: absolute;
z-index:1002;
top: 0;
left: 0;
background:-webkit-linear-gradient(top left , #7ec888,#fff);
/*border: 20px solid #06c999;*/
border-radius:70% 0 70% 55%;
-webkit-transform: rotate(90deg);
/*-moz-transform: rotate(-45deg);*/
/*-ms-transform: rotate(-45deg);*/
/*-o-transform: rotate(-45deg);*/
/*transform: rotate(-45deg);*/
-webkit-box-shadow: 0px 3px 8px rgba(0,0,0,0.2) ;
}
.infinity:after {
top: 70px;
left: 70px;
-webkit-transform: rotate(-90deg);
}
.infinity.ro90 {
top:50%; left:50%;
margin-left:-90px;
margin-top:-10px;
-webkit-transform: rotate(90deg);
}
最终效果
接下来，将CSS3的动画中心点旋转作用在叶片外层div上，就可以实现电风扇的转动
.ro45 {
-webkit-transform: rotate(45deg);
width: 100px;
height: 100px;
position: absolute;
z-index:1003;
top:50%; left:50%;
margin-left:-50px;
margin-top:-50px;
-webkit-animation-iteration-count:infinite;
/* Only run once */ -webkit-animation-fill-mode: forwards;
/* Hold the last keyframe */ -webkit-animation-timing-function:linear; /* Linear animation */
-webkit-animation-duration: 1s;
/* Full animation time */
-webkit-animation-name: left-spin;
}
@-webkit-keyframes left-spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
转动的速度可以调整，怎么样？简单的分享就到这。谢谢
