CSS动画新挑战：纯CSS实现的小风车效果！

<div class="windBox">
  <div class="threeAngle right"></div>
  <div class="threeAngle bottom"></div>
  <div class="threeAngle left"></div>
  <div class="threeAngle top"></div>
</div>
<div class="stick"></div>

.windBox {
          position: relative;
          z-index: 10;
          width: 200px;
          height: 200px;
          animation: circle 2s infinite linear;
        }
        
        .stick {
          position: absolute;
          top: 95px;
          left: 102.5px;
          height: 200px;
          width: 10px;
          background: royalblue;
          border-radius: 5px;
        }
        
        .threeAngle {
          position: absolute;
          height: 0;
          border: 50px solid transparent;
        }
        
        .threeAngle.right {
          border-right-color: rgba(223, 219, 29, 0.825);
        }
        
        .threeAngle.bottom {
          left: 100px;
          border-bottom-color: rgb(0, 255, 98);
        }
        
        .threeAngle.left {
          top: 100px;
          left: 100px;
          border-left-color: rgb(128, 115, 244);
        }
        
        .threeAngle.top {
          top: 100px;
          border-top-color: rgb(241, 0, 161);
        }
        
        @keyframes circle {
          to {
            transform: rotate(0);
          }
          from {
            transform: rotate(360deg);
          }
        }