ホームページ >ウェブフロントエンド >jsチュートリアル >コア HTML とコア CSS コードを使用したトグルスイッチのリアルな錯覚
コア HTML とコア CSS コードを使用したトグルスイッチのリアルな錯覚
- Patricia Arquetteオリジナル
- 2024-12-05 19:12:10759ブラウズ
<!DOCTYPE html>
<html lang="ja">
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>インタラクティブ ガラス カード</title>
.switch {
位置: 相対的;
幅: 210ピクセル;
高さ: 50ピクセル;
-webkit-box-sizing: ボーダーボックス;
ボックスのサイズ設定: ボーダーボックス;
パディング: 3px;
背景: #0d0d0d;
境界半径: 6px;
-webkit-box-shadow:
インセット 0 1px 1px 1px rgba(0, 0, 0, 0.5),
0 1px 0 0 rgba(255, 255, 255, 0.1);
ボックスシャドウ:
インセット 0 1px 1px 1px rgba(0, 0, 0, 0.5),
0 1px 0 0 rgba(255, 255, 255, 0.1);
}
.switch input[type="チェックボックス"] {
位置: 絶対;
z インデックス: 1;
幅: 100%;
高さ: 100%;
不透明度: 0;
カーソル: ポインタ;
}
.switch input[type="checkbox"] label {
位置: 相対的;
表示: ブロック;
左: 0;
幅: 50%;
高さ: 100%;
背景: #1b1c1c;
境界半径: 3px;
-webkit-box-shadow: インセット 0 1px 0 0 rgba(255, 255, 255, 0.1);
ボックスシャドウ: インセット 0 1px 0 0 rgba(255, 255, 255, 0.1);
-webkit-transition: すべて 0.5 秒のイーズインアウト。
トランジション: すべて 0.5 秒のイーズインアウト。
}
.switch input[type="checkbox"] label:before {
コンテンツ： "";
表示: インラインブロック;
幅: 5px;
高さ: 5px;
マージン左: 10px;
背景: #fff;
境界半径: 50%;
垂直配置: 中央;
-webkit-box-shadow:
0 0 5px 2px rgba(165, 15, 15, 0.9)、
0 0 3px 1px rgba(165, 15, 15, 0.9);
ボックスシャドウ:
0 0 5px 2px rgba(165, 15, 15, 0.9)、
0 0 3px 1px rgba(165, 15, 15, 0.9);
-webkit-transition: すべて 0.5 秒のイーズインアウト。
トランジション: すべて 0.5 秒のイーズインアウト。
}
.switch input[type="checkbox"] label:after {
コンテンツ： "";
表示: インラインブロック;
幅: 0;
高さ: 100%;
垂直配置: 中央;
}
.switch input[type="checkbox"] label i {
表示: ブロック;
位置: 絶対;
トップ: 50%;
左: 50%。
幅: 3px;
高さ: 24px;
マージントップ: -12px;
マージン左: -1.5px;
境界半径: 2px;
背景: #0d0d0d;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
ボックスシャドウ: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] label i:before、
.switch input[type="checkbox"] label i:after {
コンテンツ： "";
表示: ブロック;
位置: 絶対;
幅: 100%;
高さ: 100%;
境界半径: 2px;
背景: #0d0d0d;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
ボックスシャドウ: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] label i:before {
左: -7px;
}
.switch input[type="checkbox"] label i:after {
左: 7px;
}
.switch input[type="checkbox"]:チェックされたラベル {
左: 50%。
}
.switch input[type="checkbox"]:checked label:before {
-webkit-box-shadow:
0 0 5px 2px rgba(15, 165, 70, 0.9)、
0 0 3px 1px rgba(15, 165, 70, 0.9);
ボックスシャドウ:
0 0 5px 2px rgba(15, 165, 70, 0.9)、
0 0 3px 1px rgba(15, 165, 70, 0.9);
}</スタイル>
</head>
<div>
</div>
以上がコア HTML とコア CSS コードを使用したトグルスイッチのリアルな錯覚の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
css html webkit switch checkbox using pointer display position margin padding border viewport background transition input
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。