ホームページ >ウェブフロントエンド >jsチュートリアル >html css と javascript を使って楽しいトグルスイッチを切り替えます
html css と javascript を使って楽しいトグルスイッチを切り替えます
- Patricia Arquetteオリジナル
- 2024-12-05 14:20:13910ブラウズ
<!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 サイトの他の関連記事を参照してください。
JavaScript css html switch using pointer display position margin padding border viewport background transform transition column flex input
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。