玩转Css3动画 - 转动的风车效果

来源：互联网发布：mac版股票交易软件编辑：程序博客网时间：2024/04/28 21:08

首先定义好结构

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

复制可直接运行

0 0