神刀安全网

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

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

效果是这样的

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

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                 }             }         }     } 

看起来有点low。

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

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 【二次元的CSS】—— 纯CSS3做的能换挡的电扇

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址