这次分享的电扇，和以往用css3画人物相比 多加了一点交互，就是电扇开关的地方，用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。

GitHub传送门：

效果是这样的

HTML 结构

小技巧就是，一开始就写了一组单选按钮来做开关的部分。把单选按钮的透明度设为0，然后在后面叠加一个div来画开关的样式。

    
            
                 
     
      0
     
            
                 
     
      1
     
            
                 
     
      2
     
            
                 
     
      3
     
            
     
                
      
       CSS3 Fan
      
                
      
                
      
                
      
                
      
                
      
                
      
                
      
                    
       
                    
       
                    
       
                
      
            
     
            
     
            
     
            
     
            
     
            
     
            
     
        
    

开关部分的LESS代码如下

.switch{        position: absolute;        width: 24px;        height: 24px;        top: 296px;        z-index: 13;        opacity: 0;        cursor: pointer;    }   .switch_0{        .switch;        left: 50px;        &:checked+div{            &+input+div+input+div+input+div+.mask{                .leafs{                    animation-play-state:paused;                }            }        }    }    .switch_1{        .switch;        left: 75px;        &:checked+div{            background: #a9af27;            color: #0e6873;            &+input+div+input+div+.mask{                .leafs{                    animation-duration : 0.7s                }            }        }    }    .switch_2{        .switch;        left: 100px;        &:checked+div{            background: #a9af27;            color: #0e6873;            &+input+div+.mask{                .leafs{                    animation-duration : 0.4s                }            }        }    }    .switch_3{        .switch;        left: 125px;        &:checked+div{            background: #a9af27;            color: #0e6873;            &+.mask{                .leafs{                    animation-duration : 0.3s                }            }        }    }

看起来有点low。

至于电扇的CSS样式部分就不再赘述了。

有个地方需要优化，就是在换挡的时候，动画应该柔和些。有同学想到用什么办法优化下吗？