CSS风车动画

CSS代码：

*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 200px;
				height: 200px;
				position: relative;
				float: left;
				top: 100px;
				left: 100px;
				 animation:myRotate 3s linear infinite;
			}
			#box>div{
				margin-top: 50px;
				position: absolute;
				width: 100px;
				height: 50px;
				border-radius: 50px 50px 0 0;
			}
			.one{
				background-color: #7FFFD4;
			}
			.two{
				background-color: #7FFFE4;
				transform-origin: 100px 50px;
				transform: rotate(90deg);
			}
			.three{
				background-color: #7FFFF4;
				transform-origin: 100px 50px;
				transform: rotate(180deg);
			}
			.four{
				background-color: #8FFFF4;
				transform-origin: 100px 50px;
				transform: rotate(270deg);
			}
			@keyframes myRotate{
			    0%{ -webkit-transform: rotate(0deg);}
			    50%{ -webkit-transform: rotate(180deg);}
			    100%{ -webkit-transform: rotate(360deg);}
			}

标签代码：

<div class="box" id="box">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
			<div class="four"></div>
		</div>

效果如下：