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

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

<div class="fengche">
<div class="zhu"></div>
<div class="zhuan">
<div class="z"></div>
<div class="x
4000
iaoyan"></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;
}

代码就这么多，下面让我们看下实现的效果图：


不要问我为啥那么丑，我的技术还不够，你们要是有什么更好的方法一定要跟我说一下，大家一起进步嘛，毕竟，我也是初学者，所以欢迎大家来评论（づ￣3￣）づ╭❤～