使用CSS和HTML实现网页大风车效果

使用css和html实现大风车动画效果。我们可以通过设置边框颜色和边框相互挤压的形成三角型，再通过使大盒子以中心旋转来实现大风车动画效果。

HTML代码，我通过写四个相同的盒子放在一个大盒子里面。

<div>
        <li class="box1"></li>
        <li class="box2"></li>
        <li class="box3"></li>
        <li class="box4"></li>
  </div>

不给四个盒子里面添加内容，用css设置四个小盒子的边框，使四个边框相互挤压形成大风车的叶片。

 .box1 {
            border-bottom: 100px solid yellow;
        }

        .box2 {
            border-left: 100px solid rgb(206, 97, 14);
        }

        .box3 {
            border-right: 100px solid rgb(248, 20, 226);
        }

        .box4 {
            border-top: 100px solid rgb(15, 245, 80);
            color: violet;
        }

最后再给大盒子添加旋转动画。

 @keyframes div {

            0% {
                transform: rotateZ(0deg);
           
            }

           

            100% {
                transform: rotateZ(360deg);
              
            }

        }