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

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

效果是这样的

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样式部分就不再赘述了。

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