以前制作网页动画一般使用javascript，现在已经有越来越多动动画使用纯CSS实现，并且动画的控制也可以使用CSS3实现，因为CSS 3来了，CSS 3的动画功能确实强大。以下是一个纯CSS3制作的风车旋转动画，而且也用CSS 3控制速度。

体验效果：

效果图：

可以看到，风车的叶片是三角形，使用css画各种图形请参考：

css制作动画是用到了animation属性，请参考：

扇叶的旋转使用到了transform属性，参考：

本示例用到了CSS 3的选择器nth-of-type，参考：

下面给出本示例的代码：

     
     
     
     
    
      
        
       暂停        
       旋转        
       中速        
       高速        
       
            
        
            
                    
                    
                    
                
       
    
      
    
      
何问起温馨小提示：暂停后点击页面任何区域都可自动旋转哦!
     
     
     
      
适用于支持CSS3的浏览器。
      
来源：何问起 说明
     

CSS文件代码：

*{
   margin:0; padding:0;}body{
   background:#eee;width:100%; height:100%;}.wrapper{
       position: relative;    width: 800px;    height:450px;    margin:60px auto 0;}.wrapper .pin-layout{
       position: absolute;    bottom: 0;    left: calc(50% - 20px);    width:40px;    height:280px;}.wrapper .pin-layout::after{
       position:absolute;    bottom:0;    left: calc(50% - 20px);    content:"";    height:0;    width:10px;    border-width: 0px 15px 280px 15px;    border-style:solid;    border-color:transparent transparent #6B3500 transparent;}.wrapper .pin-layout .pillar{
       position: absolute;    top: -18px;    left: calc(50% - 18px);    width:36px;    height:36px;    z-index: 9;    transform: rotateZ(45deg);    transition:all .9s linear;    animation: hovertreespin 3s linear 0s infinite;}.pin-layout .control:hover::after{
       position: absolute;    left: 0;    content: "";    width: 100%;    height:100%;    background: rgba(0,0,0,.3);}.pin-layout .control{
       position: absolute;    bottom:0;    width: 80px;    height:30px;    line-height:30px;    border: 1px solid #ADADAD;    border-radius: 4px;    text-align:center;    text-decoration:none;    letter-spacing:2px;    color: white;    background: red;}.pin-layout .control:nth-of-type(1){
       left: -100px;}.pin-layout .control:nth-of-type(3):focus ~ .pillar{
       animation-duration:.8s;}.pin-layout .control:nth-of-type(4):focus ~ .pillar{
       animation-duration:.2s;}.pin-layout .control:nth-of-type(2){
       right: -100px;    background: green;}.pin-layout .control:nth-of-type(3){
       bottom: -40px;    left: -100px;    background: #037862;}.pin-layout .control:nth-of-type(4){
       bottom: -40px;    right: -100px;    background: #036B3E;}.pin-layout .control:nth-of-type(1):focus ~ .pillar{
       animation-play-state:paused;}.pin-layout .control:nth-of-type(2):focus ~ .pillar{
       animation-play-state:running;} .pin-layout .pillar span[class^="item"]{
       position: absolute;     top: calc(-200px + 18px);    left: 18px;    border-width:0px 80px 200px 0px;    border-style:solid; } .pin-layout .pillar span[class^="item"]:nth-of-type(1){
       z-index:1;    border-color:transparent transparent dodgerblue transparent;    /*border-color:green red gray blue;*/} .pin-layout .pillar span[class^="item"]:nth-of-type(2){
       z-index:2;    border-color:transparent transparent orangered transparent;    transform-origin:left bottom;    transform: rotateZ(90deg);} .pin-layout .pillar span[class^="item"]:nth-of-type(3){
       z-index:3;    border-color:transparent transparent greenyellow transparent;    transform-origin:left bottom;    transform: rotateZ(180deg);} .pin-layout .pillar span[class^="item"]:nth-of-type(4){
       z-index:4;    border-color:transparent transparent mediumpurple transparent;    transform-origin:left bottom;    transform: rotateZ(270deg);}.wrapper .pin-layout .pillar .dot{
       position: absolute;    top: 0;    left: 0;    border-width: 19px;    border-style: solid;    border-color: #3C0505 transparent #3C0505 transparent;    border-radius:50%;    background:#F505EE;    z-index:1999;    box-shadow:0 0 2px #1A0505;}@keyframes hovertreespin {
       0%{        transform: rotate(0deg)    }    100%{
           transform:rotate(360deg);    }}

使用图片扇叶的风车：

特效集合：