动态风车

动态风车


*{
padding:0;
margin:0;
}
body{
background:#000;
}
div:nth-child(1){
height:0;
width:10px;
border-width:0 20px 120px 20px;
border-style:none solid solid;
border-color:transparent transparent white;
position: absolute;
top:260px;
left:45%;
}
div:nth-child(2){
width:30px;
height:30px;
background:white;
border-radius: 15px;
position: absolute;
top:250px;
left:45.75%;
z-index: 2;
}
div:nth-child(3){
height:0;
width:3px;
border-width:0 5px 100px 5px;
border-style:none solid solid;
border-color:transparent transparent brown;
position: absolute;
top:170px;
left:46.5%;
transform:rotate(-45deg);
animation:rotate1 2s linear infinite;
transform-origin: bottom;
}
div:nth-child(4){
height:0;
width:3px;
border-width:0 5px 100px 5px;
border-style:none solid solid;
border-color:transparent transparent pink;
position: absolute;
top:170px;
left:46%;
transform:rotate(45deg);
animation:rotate2 2s linear infinite;
transform-origin: bottom;
}
div:nth-child(5){
height:0;
width:3px;
border-width:0 5px 100px 5px;
border-style:none solid solid;
border-color:transparent transparent yellow;
position: absolute;
top:158px;
left:46.4%;
transform:rotate(180deg);
animation:rotate3 2s linear infinite;
transform-origin: bottom;
}
@keyframes rotate1 {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes rotate2 {
0%{
transform: rotate(120deg);
}
100%{
transform: rotate(480deg);
}
}
@keyframes rotate3 {
0%{
transform: rotate(240deg);
}
100%{
transform: rotate(600deg);
}
}