玩转Css3动画 - 转动的风车效果_css3 降落的竹蜻蜓-优快云博客

本文介绍如何使用CSS3实现一个动态的风车旋转效果。通过定义HTML结构并添加相应的CSS样式，可以创建出一个视觉吸引人的风车动画，适合前端开发者学习实践。

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

首先定义好结构

<div id="wrap">
        <!--柱子 --> 
        <div id="zhuzi"></div>
        <!--  转轴  -->
        <div id="zhou">
            <!--指针-->
            <div class="zhizhen z1"></div>
            <div class="zhizhen z2"></div>
            <div class="zhizhen z3"></div>
            <div class="zhizhen z4"></div>
            <div id="zhuanzhou"></div>
        </div>

    </div>

然后，添加css样式

#wrap{ border:1px solid #ccc; height:600px;   width:1100px; margin:0 auto; margin-top:35px; position:relative;}
    #zhuzi{width:12px; height:0px;  position:absolute; left:535px; 
           bottom:0;
           border-width:0 25px 380px 25px;
           border-style:none solid solid solid;
           border-color: transparent transparent #996699 transparent; 
    } 

    #zhou{ width:50px; height:50px;  position:absolute; left:540px; top:185px; animation: fengchedonghua 3s; animation-iteration-count:infinite;animation-timing-function: linear; }
    #zhuanzhou{ width:50px; height:50px;background:#FFCC33; border-radius:25px; position:absolute; z-index:20;}

    .zhizhen{ width:180px; height:4px;margin:1px; position:absolute; left:25px; top:25px;
           border-width:0 0 125px 280px;
           border-style: none solid solid solid ;
           border-color: transparent  transparent  transparent #FFFF00; 
    }

    .z2{
        transform-origin:0 0;
        transform: rotate(270deg);
          border-color: transparent  transparent  transparent #66CCCC; 
    }

    .z3{
        transform-origin:0 0;
        transform: rotate(180deg);

         border-color: transparent  transparent  transparent #CC99CC; 
    }

    .z4{
        transform-origin:0 0;
        transform: rotate(90deg);

         border-color: transparent  transparent  transparent #99CC33; 
    }


    @keyframes fengchedonghua
    {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
    }

复制可直接运行