转动的风车
2016-09-26 本文已影响26人
墨墨君
以下运用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代码
静态页面
有兴趣的可以试试哦，欢迎喜欢的朋友和我分享你的建议。
