css3动画让风车转起来

欢迎使用Markdown编辑器

  CSS3动画样式不多，但是呢，它的每一个特性能实现的功能还是挺多的，有句话说的好，只有你想不到的，而没有你做不到的。好了，废话不多说，直接上代码。

html代码

  在html代码中，使用4个div封装了一下风车的扇叶并将封装好的扇叶放入一个大的div（#leaf_box）中，最下面是风车的杆子，这里给了它外面的div（#box）相对定位，这样固定风车柄时就可以直接相对于它外面的盒子设置偏移量就行了

<div id="box">
	<div id="leaf_box">
		<div id="leaf1" class="leaf"></div>
		<div id="leaf2" class="leaf"></div>
		<div id="leaf3" class="leaf"></div>
		<div id="leaf4" class="leaf"></div>
	</div>
	<div id="ganzi"></div>
</div>

css样式

   首先对最外层的div（#box）设置一个宽高和margin ： auto固定在浏览器中间，我在这里设置了黑色的border，所以看起来还比较明显，然后需要给box这个div一个position的样式，因为下面的风车的杆子ganzi会用到定位，box就是ganzi的父元素。
   接下来就是包裹我们风车扇叶的leaf_box这个div了，同样的也要设置宽高和position，因为它是下面所有扇叶leaf的父元素，最后设置了一个tranform（这是css3才有的）使风车转动起来，transition是过渡的意思，在这里实现了加速旋转的效果（注意：tranform一般不用先设置，一般先调整好下面的四个扇叶leaf和风车的杆子ganzi的位置布局后再设置，因为先设置的话，就会转起来了，就不方便做布局了）。
   然后是扇叶，扇叶没什么难的，主要是需要做成半椭圆，这个调整border-radius的比例就可以做到，实现四个位置不同形状相同的扇叶，只需要使用tranform旋转一下角度就可以实现四个不同那个方位的扇叶了，当然这期间也需要调整top和left才能做到将四片扇叶聚焦到一个点上。
   再者就是杆子ganzi的定位，杆子的定位很简单，针对父元素box进行定位，只要挪到扇叶的中点就好了。
   最后就是让包裹4片扇叶的leaf_box旋转起来了，在hover和active这两个伪类中实现相应的动画，就可以实现鼠标移入和移出这两种状态的出现的不同动画效果。

#box{
	margin: 20px auto;
	width: 1100px;
	height: 700px;
	border: 1px solid black;
	position: relative;
}
#leaf_box{
	margin: 20px auto;
	width: 200px;
	height: 200px;
	/* border-radius: 50%; */
	/* border: 1px solid black; */
	position: relative;
	transform: rotate(0deg);
	transition-duration: 200s;
}
#leaf_box:hover{
	transform: rotate(72000deg);
}
#leaf_box:active{
	transform: rotate(40deg);
	transition-duration: 0s;
}
.leaf{
	display: inline-block;
	width:25px;
	height: 100px;
	background-color: red;
	border-radius: 0 50px 50px 0 / 0 100px 100px 0 ;
}

#leaf1{
	position: absolute;
	top: 2px;
	left: 110px;
	transform: rotate(10deg);
}

#leaf2{
	position: absolute;
	top: 69px;
	left: 135px;
	transform: rotate(99deg);
}

#leaf3{
	position: absolute;
	top: 97px;
	left: 68px;
	transform: rotate(189deg);
}
#leaf4{
	position: absolute;
	top: 22px;
	left: 46px;
	transform: rotate(289deg);
}
#ganzi{
	width:5px;
	height: 200px;
	background:red;
	position: absolute;
	top: 119px;
	left: 549px;
}

效果图

  鼠标移至风车上方时触发旋转效果（风速由慢到快），移出时触发停止操作（又快到慢减速停止）。