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

前端最帅彭于晏

于 2023-02-24 20:34:48 发布

阅读量2.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html5 css 前端

本文链接：https://blog.youkuaiyun.com/weixin_56548715/article/details/129207935

前端专栏收录该内容

4 篇文章

订阅专栏

通过设置HTML的四个盒子和CSS的边框颜色，以及应用关键帧动画，可以实现大风车的旋转效果。每个盒子的边框相互挤压形成风车叶片，然后给大盒子添加一个从0度到360度的旋转动画，从而创造出动态的大风车视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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);
              
            }

        }