CSS3 制作旋转的大风车

CSS3 制作旋转的大风车

 

发一个很久以前的作品，当开始得知CSS3可以做动画时，就很想玩玩，于是就做了个充满童年回忆的大风车。

HTML：

<div class="windmill">
<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="dot"></div>
</div>

实现过程：首先来一个容器里面四个风扇、 一个中心点 结构很简单，使用绝对分别定好位。然后再使用border-radius把风扇矩形变成半圆，形状就有了，再分别给其上色，红黄蓝绿四种渐变颜色。最后给容器加个animation使整个容器开始旋转即可。

CSS：

.windmill{ 
padding:10px; 400px; height:400px;  position:relative;
animation-name:moveWindmill;
animation-duration:4s;
animation-timing-function:linearanimation-delay:0;
animation-iteration-count:infinite;
animation-play-state:running;

/* 动画: */
-moz-animation-name:moveWindmill;
-moz-animation-duration:4s;
-moz-animation-timing-function:linear;
-moz-animation-delay:0;
-moz-animation-iteration-count:infinite;
-moz-animation-play-state:running;
-webkit-animation-name:moveWindmill;
-webkit-animation-duration:4s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;

-ms-animation-name:moveWindmill;
-ms-animation-duration:4s;
-ms-animation-timing-function:linear;
-ms-animation-delay:0;
-ms-animation-iteration-count:infinite;
-ms-animation-play-state:running;
}
.windmill div{ position:absolute; 100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;}
.windmill  .red{  background-color:red;  background: -moz-radial-gradient(right, circle,red , #000);
                    background: -webkit-radial-gradient(right, circle,red , #000);
}
.windmill  .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg);   background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);}
.windmill  .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg);  background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000);  }
.windmill  .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg);  background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000);  }

.windmill  .dot{ 50px; height:50px; border-radius:50px ; position:absolute; left:50%;top:50%; margin-left:-25px; margin-top:-25px;background:#fff;  background: -moz-radial-gradient(center, circle,#fff , #666); background: -webkit-radial-gradient(center, circle,#fff , #666);}

@keyframes moveWindmill /* Firefox */
{
    0% {    -ms-transform: rotate(0deg)}
        25% {    -ms-transform: rotate(90deg)}
        50% {    -ms-transform: rotate(180deg)}
        75% {    -ms-transform: rotate(270deg)}
        100% {    -ms-transform: rotate(360deg)}

}

@-ms-keyframes moveWindmill /* ms*/
{
    0% {    -ms-transform: rotate(0deg)}
        25% {    -ms-transform: rotate(90deg)}
        50% {    -ms-transform: rotate(180deg)}
        75% {    -ms-transform: rotate(270deg)}
        100% {    -ms-transform: rotate(360deg)}

}
@-webkit-keyframes moveWindmill /*webkit*/ 
{ 

0% { -webkit-transform: rotate(0deg)} 

25% { -webkit-transform: rotate(90deg)} 

50% { -webkit-transform: rotate(180deg)} 

75% { -webkit-transform: rotate(270deg)} 

100% { -webkit-transform: rotate(360deg)} } 

@-moz-keyframes moveWindmill /* Firefox */ 
{ 
0% { -moz-transform: rotate(0deg)} 
25% { -moz-transform: rotate(90deg)} 
50% { -moz-transform: rotate(180deg)} 
75% { -moz-transform: rotate(270deg)} 
100% { -moz-transform: rotate(360deg)} 
}

 

 

标签: css3