转动的风车

以下运用css3制作的转动的风车，主要运用了动画、过渡、渐变制作。

css代码：​

.box{

width: 400px;

height: 400px;

margin: 100px auto;

transition: 1s;

}

.box div{

width: 180px;

height: 180px;

margin: 10px;

border: 1px solid green;

background:-webkit-radial-gradient(red,blue);

box-sizing: border-box;

float: left;

text-align: center;

line-height: 180px;

}

.box div:nth-of-type(1),.box div:nth-of-type(4){

border-radius: 0px 100px;

}

.box div:nth-of-type(2),.box div:nth-of-type(3){

border-radius:100px 0px ;

}

.box:hover{

-webkit-transform: rotate(7200deg);

}

html代码

静态页面

​有兴趣的可以试试哦，欢迎喜欢的朋友和我分享你的建议。