这次分享的电扇,和以往用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
}
}
}
}
看起来有点low。
至于电扇的CSS样式部分就不再赘述了。
有个地方需要优化,就是在换挡的时候,动画应该柔和些。有同学想到用什么办法优化下吗?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。