转载

【二次元的CSS】—— 纯CSS3做的能换挡的电扇

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

GitHub传送门： https://github.com/lancer07/css3_fan

效果是这样的

HTML 结构

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

       <div id="fan">             <input type="radio" name="switch" class="switch_0"/>             <div class="switch_btn_0">0</div>             <input type="radio" checked name="switch" class="switch_1"/>             <div class="switch_btn_1">1</div>             <input type="radio" name="switch" class="switch_2"/>             <div class="switch_btn_2">2</div>             <input type="radio" name="switch" class="switch_3"/>             <div class="switch_btn_3">3</div>             <div class="mask">                 <div class="logo">CSS3 Fan</div>                 <div class="line_1"></div>                 <div class="line_2"></div>                 <div class="line_3"></div>                 <div class="line_4"></div>                 <div class="line_5"></div>                 <div class="line_6"></div>                 <div class="leafs">                     <div class="leaf_1"></div>                     <div class="leaf_2"></div>                     <div class="leaf_3"></div>                 </div>             </div>             <div class="header"></div>             <div class="neck"></div>             <div class="neck_footer"></div>             <div class="bottom"></div>             <div class="bottom_footer_1"></div>             <div class="bottom_footer_2"></div>         </div>

开关部分的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                 }             }         }     }