如何用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;
}

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


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