效果是这样的

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

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

本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！