html css と javascript を使って楽しいトグルスイッチを切り替えます-jsチュートリアル-php.cn

html css と javascript を使って楽しいトグルスイッチを切り替えます

Patricia Arquette

リリース： 2024-12-05 14:20:13

オリジナル

912 人が閲覧しました

Toggle Switches fun 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;
            背景色: #121212;
            色: #fff;
            フォントファミリー: Arial、サンセリフ;
        }
        .toggle-container {
            ディスプレイ: フレックス;
            整列項目: 中央;
            マージン: 20px 0;
        }
        .toggle-label {
            マージン左: 10px;
            フォントサイズ: 1.2rem;
            背景色: rgb(64, 109, 94);
            パディング: 5px;

        }
        .switch {
            位置: 相対的;
            表示: インラインブロック;
            幅: 50ピクセル;
            高さ: 25px;
        }
        .switch 入力 {
            不透明度: 0;
            幅: 0;
            高さ: 0;
        }
        .スライダー{
            位置: 絶対;
            カーソル: ポインタ;
            トップ: 0;
            左: 0;
            右: 0;
            下: 0;
            背景色: #555;
            境界半径: 25px;
            トランジション: 0.4秒;
        }
        .slider:前 {
            位置: 絶対;
            コンテンツ： "";
            高さ: 20ピクセル;
            幅: 20ピクセル;
            左: 3ピクセル;
            下: 2.5ピクセル;
            背景色: 白;
            境界半径: 50%;
            トランジション: 0.4秒。
        }
        入力:チェック済み .slider {
            背景色: #4caf50;
        }
        入力:チェック済み .slider:before {
            変換:translateX(24px);
        }
        。箱{
            高さ: 250ピクセル;
            幅: 300ピクセル;
            背景色: rgb(8, 72, 51);
            境界半径: 10px;
            パディング:5px;
        }
    </スタイル>
</head>

    <div>




          </div>

ログイン後にコピー

以上がhtml css と javascript を使って楽しいトグルスイッチを切り替えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。