Css Html 大风车

<div style = "height:500px;width:500px;position:static;float:left;">
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="cyna"></div>
</div>
<div class="limb"></div>
</div>
<div style = "height:500px;width:500px;position:static;float:left;">
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="cyna"></div>
</div>
<div class="limb"></div>
</div>
<div style = "height:500px;width:500px;position:static;float:left;">
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="cyna"></div>
</div>
<div class="limb"></div>
</div>
<div style = "height:500px;width:500px;position:static;float:left;">
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="cyna"></div>
</div>
<div class="limb"></div>
</div>
<style>
div{ border-radius: 50%;position: absolute; }
.red{
border-top:100px solid red;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid red;
transform:rotate(-45deg);
left:150px;
top:50px;
}
.yellow{
border-top:100px solid yellow;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid yellow;
left:250px;
top:150px;
transform:rotate(45deg);
}
.pink{
border-top:100px solid pink;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid pink;
left:150px;
top:250px;
transform:rotate(135deg);
}
.cyna{
border-top:100px solid cyan;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid cyan;
left:50px;
top:150px;
transform:rotate(-135deg);
}
@keyframes run{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
@-webkit-keyframes run{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.wrap{
width: 500px;
height: 500px;
line-height: 500px;
text-align: center;
border-radius: 0;
position: relative;
margin:0 auto;
animation:run 2s linear infinite;
}
.limb{
width: 10px;
height: 300px;
border-radius: 0;
background-color: #000;
margin: 0 auto;
left: 245px;
top: 0;
margin-top: -250px;
position: static;
z-index: -1;
}
<\style>

转载于:https://www.cnblogs.com/zwcai/p/7619849.html