[2次元CSS] -- 純粋なCSS3_html/css_WEB-ITnoseで切り替えられるファン

今回共有したファンは、以前の 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                }            }        }    }

少し低いように見えます。

扇風機の CSS スタイルの部分については、詳細は説明しません。

最適化する必要がある領域が 1 つあります。それは、ギアを変更するときのアニメーションをより柔らかくする必要があります。それを最適化する方法を考えている学生はいますか?