css实现风车样式

* {
  margin:0;
  padding:0;
}
.main {
  width:804px;
  height:804px;
  animation:roll 3000ms linear infinite;
}
@keyframes roll {
  0% {
  transform:rotate(0deg);
}
100% {
  transform:rotate(-360deg);
}
}.white_circle {
  z-index:99;
  position:absolute;
  width:50px;
  height:50px;
  border-radius:50px;
  background-color:white;
  margin:377px 0 0 377px;
}
.fla {
  position:absolute;
  width:402px;
  height:180px;
}
.fla_one {
  transform:rotate(270deg);
  margin:108px 0px 0px 121px;
}
.fla_two {
  transform:rotate(180deg);
  margin-top:389px;
}
.fla_three {
  transform:rotate(90deg);
  margin:511px 0 0 280px;
}
.fla_four {
  transform:rotate(360deg);
  margin:230px 0 0 402px;
}
.tri {
  width:0;
  height:0;
  border-width:142px;
  border-style:solid;
  border-top-left-radius:109px 122px;
  position:absolute;
  transform:rotate(45deg);
  top:28px;
  left:56px;
}
.tri_one {
  border-color:#F1C40F transparent transparent #F1C40F;
}
.tri_two {
  border-color:#EA4C3C transparent transparent #EA4C3C;
}
.tri_three {
  border-color:#2ECC71 transparent transparent #2ECC71;
}
.tri_four {
  border-color:#1ABC9C transparent transparent #1ABC9C;
}
.squ {
  position:absolute;
  width:271px;
  height:170px;
  border-top-right-radius:98px 68px;
}
.squ_one {
  background-color:#F39C12;
}
.squ_two {
  background-color:#C0392B;
}
.squ_three {
  background-color:#27AE60;
}
.squ_four {
  background-color:#16A085;
}