HTML CSSとJavaScriptを使用したスマートスクリーンアニメーション-jsチュートリアル-php.cn

HTML CSSとJavaScriptを使用したスマートスクリーンアニメーション

Linda Hamilton

リリース： 2024-11-21 13:52:35

オリジナル

866 人が閲覧しました

Smart Screen Animation using html css and javascript

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>スマート スクリーン メニュー</title>
    
        体 {
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            整列項目: 中央;
            高さ: 100vh;
            背景色: #1c1c1e;
            マージン: 0;
            オーバーフロー: 非表示;
        }

        .menu-container {
            位置: 相対的;
            幅: 250ピクセル;
            高さ: 250ピクセル;
        }

        .background-circle {
            位置: 絶対;
            トップ: 50%;
            左: 50%。
            変換: 変換(-50%, -50%) スケール(0);
            幅: 200ピクセル;
            高さ: 200ピクセル;
            背景色: #ffffff30;
            境界半径: 50%;
            トランジション: トランスフォーム 0.4 秒イーズアウト。
        }

        .center-btn {
            位置: 絶対;
            トップ: 50%;
            左: 50%。
            変換: 変換(-50%, -50%);
            幅: 60ピクセル;
            高さ: 60ピクセル;
            背景色: #009688; /* ティールカラー */
            境界半径: 50%;
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            整列項目: 中央;
            色: #ffffff;
            フォントサイズ: 24px;
            カーソル: ポインタ;
            トランジション: 変換 0.3 秒のイーズ、背景色のイーズ 0.3 秒。
        }

        .center-btn.open-icon::before {
            コンテンツ： '？'; /* アイコンを展開します */
        }

        .center-btn.close-icon::before {
            コンテンツ： '？'; /* アイコンを折りたたむ */
        }

        .center-btn:ホバー {
            変換: 変換(-50%, -50%) スケール(1.1);
            背景色: #00695c;
        }

        。オプション {
            位置: 絶対;
            トップ: 50%;
            左: 50%。
            変換: 変換(-50%, -50%) スケール(0);
            幅: 50ピクセル;
            高さ: 50ピクセル;
            背景色: #2c2c2e;
            境界半径: 50%;
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            整列項目: 中央;
            色: #aaa;
            フォントサイズ: 18px;
            カーソル: ポインタ;
            不透明度: 0;
            トランジション: すべて 0.4 秒の緩和。
        }

        .option.selected {
            背景色: #ffdd59;
            色: #000;
        }

        .option.selected::before {
            コンテンツ： '';
            位置: 絶対;
            上: -15px;
            表示: ブロック;
            幅: 5px;
            高さ: 5px;
            背景色: #ffdd59;
            境界半径: 50%;
        }.option.selected::after {
            コンテンツ： '';
            位置: 絶対;
            上: -8px;
            幅: 15px;
            高さ: 3px;
            背景色: #ffdd59;
            変換: 変換(-3px, 10px);
        }

        .option:ホバー {
            背景色: #ffd93d;
            色: #000;
        }

        /* 外側の円と中心からのアニメーション */
        .menu-container.open .background-circle {
            変換: 変換(-50%, -50%) スケール(1);
        }

        .menu-container.open .option {
            不透明度: 1;
            ポインターイベント: すべて;
        }

        /* アイコンの個々の位置 */
        .brightness { 変換: 変換(-50%, -50%) 変換(-100px, 0); }
        .wifi { 変換: 変換(-50%, -50%) 変換(-70px, -70px); }
        .airplane { 変換: 変換(-50%, -50%) 変換(0, -100px); }
        .bluetooth { 変換: 変換(-50%, -50%) 変換(70px, -70px); }
        .flashlight { 変換: 変換(-50%, -50%) 変換(100px, 0); }
        .location { 変換: 変換(-50%, -50%) 変換(70px, 70px); }
        .dnd { 変換: 変換(-50%, -50%) 変換(0, 100px); }
        .screenshot { 変換: 変換(-50%, -50%) 変換(-70px, 70px); }

        .menu-container.open .brightness { 変換: 変換(-50%, -50%) 変換(-100px, 0) スケール(1); }
        .menu-container.open .wifi { 変換: 変換(-50%, -50%) 変換(-70px, -70px) スケール(1); }
        .menu-container.open .airplane { 変換: 変換(-50%, -50%) 変換(0, -100px) スケール(1); }
        .menu-container.open .bluetooth { 変換: 変換(-50%, -50%) 変換(70px, -70px) スケール(1); }
        .menu-container.open .flashlight { 変換: 変換(-50%, -50%) 変換(100px, 0) スケール(1); }
        .menu-container.open .location { 変換: 変換(-50%, -50%) 変換(70px, 70px) スケール(1); }
        .menu-container.open .dnd { 変換: 変換(-50%, -50%) 変換(0, 100px) スケール(1); }
        .menu-container.open .screenshot { 変換: 変換(-50%, -50%) 変換(-70px, 70px) スケール(1); }
    </スタイル>
</head>

    <div>




          </div>

ログイン後にコピー

以上がHTML CSSとJavaScriptを使用したスマートスクリーンアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。