如何用css3实现简单旋转的风车

如何用css3实现简单旋转的风车
在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转，其实也没什么难度的。先设置它的样式，然后要用定位把它放到合适的位置就可以了。
HTML的代码如下：

<div class="fengche"><div class="zhu"></div><div class="zhuan"><div class="z"></div><div class="xiaoyan"></div><div class="z1"></div><div class="z2"></div><div class="z3"></div><div class="z4"></div></div></div>

名字你们不要学我这样给啊，命名一定要标准，我这个是刚学的时候打的，只是懒得改了。
Css的代码如下：

.fengche{position: relative;
}
.zhuan{width: 300px;height: 300px;position: relative;clear: both;animation: zhuan 6s linear infinite;
}
@keyframes zhuan{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}
.z{width: 50px;height: 50px;margin: 0px;background: #B5B5B5;border-radius: 50%;position: absolute;top: 126px;left: 125px;
}
.xiaoyan{width: 20px;height: 20px;margin: 0px;background:#C8C8C8;border-radius: 50%;position: absolute;top: 140px;left: 140px;
}
.z1,.z3{width: 40px;height: 135px;background: #EBF453;border-radius: 50%;
}.z1{position: absolute;top: -35px;left: 110px;
}
.z3{position: absolute;bottom: -35px;left: 110px;
}
.z2,.z4{width: 135px;height: 40px;background: #EBF453;border-radius: 50%;
}
.z2{position: absolute;top: 115px;left: 160px;
}
.z4{position: absolute;top: 115px;right: 160px;
}
.zhu{width: 30px;height: 300px;background: #82BDD5;position: absolute;top: 81.5%;left: 135px;border-radius: 35% 35% 0 0;
}