首頁 > web前端 > html教學 > 【二次元的CSS】-- 纯CSS3做的能换挡的电扇_html/css_WEB-ITnose

【二次元的CSS】-- 纯CSS3做的能换挡的电扇_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:17:28
原創
966 人瀏覽過

这次分享的电扇,和以往用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样式部分就不再赘述了。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板