コア HTML とコア CSS コードを使用したトグルスイッチのリアルな錯覚

  
  <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);
}スタイル>


  <div>




          </div>

            
        

以上がコア HTML とコア CSS コードを使用したトグルスイッチのリアルな錯覚の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。