css实现大风车

利用css3中的关键帧动画来实现

---

实现的效果

HTML代码

//画出风车支撑棍
<div class="box6"></div>
//包裹整个风车扇叶和中心点的盒子
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>   
<div>

css代码：

<style type="text/css">
            body{
				position: relative;
				
			}
			.box{
			    height: 120px;
				width: 120px;
                //动画名字：wimdmill
				animation-name: windmill;
                //规定动画播放次数：无限次
				animation-iteration-count: infinite;
                //规定动画完成一个周期所花费的时间
                animation-duration: 1s;
                //规定动画的速度曲线：线性
                animation-timing-function:linear;
			}
			.box1{
				height: 60px;
				width: 30px;
                //左半圆
				border-radius: 30px 0px 0px 30px;
				background-color: blue;
				position: absolute;
			    top:60px;
				left: 30px;	
			}
			.box2{
				height: 30px;
				width: 60px;
				background-color: pink;
                //上半圆
				border-radius: 30px 30px 0px 0px;
				position: absolute;
				top: 30px;
            }
			.box3{
				height: 30px;
				width: 60px;
				background-color: yellow;
                //下半圆
				border-radius: 0px 0px 30px 30px;
				position: absolute;
				left: 60px;
				top: 60px;
			}
			.box4{
				height: 60px;
				width: 30px;
				background-color:green;
                //右半圆
				border-radius: 0px 30px 30px 0px;
				position: absolute;
				left: 60px;
			}
		    .box5{
                //小圆心
				height: 10px;
				width: 10px;
				background-color:dodgerblue;
				border-radius: 50px;
				position: absolute;
				top: 55px;
				left: 55px;
			}
			.box6{
				height: 120px;
				width: 5px;
				background-color: burlywood;
				position: absolute;
				top: 60px;
				left: 57.5px;
			}
		   @keyframes windmill{
		    	from{
		    	transform:rotate(0deg);
		    	}
		    	to{
		    		transform: rotate(360deg);
		    	}
		    }
		</style>