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

作者： Leo_wl

　　　　

出处： http://www.cnblogs.com/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于CSS3 制作旋转的大风车的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did46974