css3模仿大风车

<style>

.box{

width: 400px;

height: 400px;

margin: 100px auto;

transition: 5s linear;

}

.box div{

width: 180px;

height: 180px;

margin: 10px;

border: 1px solid #000;

box-sizing: border-box;

float: left;

background: #f00;

}

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

border-radius: 0 70%;

}

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

border-radius: 70% 0;

}

.box:hover{

transform: rotate(720deg);

}

</style>

 

<div class="box">

<div></div>

<div></div>

<div></div>

<div></div>

</div>