ホームページ > 記事 > ウェブフロントエンド > 美しい純粋な CSS3 スライド スイッチ ボタンのセット
簡単なチュートリアル
これは、CSS3 を使用して作成された美しいスライド スイッチ ボタン効果のセットです。このスライド ボタンのセットは、Bootstrap のシナリオ クラスに従って設計されており、5 つの異なるシナリオと使用できない状態に適応できます。
HTML 構造の使用方法
スライド ボタン効果の基本的な HTML 構造は、d5fd7aea971a85678ba271703566ebfd 要素と 2 つの 2e1cf0710519d5598b1f0f14c36ba674 要素を使用します。
<div class="switch-box"> <input id="default" class="switch-box-input" type="checkbox" /> <label for="default" class="switch-box-slider"></label> <label for="default" class="switch-box-label">Default</label> </div>
CSS スタイル
最初の 2e1cf0710519d5598b1f0f14c36ba674switch-box-slider は、スライド ボタンのスライド軸を作成するために使用されます。
.switch-box .switch-box-slider { position: relative; display: inline-block; height: 8px; width: 32px; background: #d5d5d5; border-radius: 8px; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
。 .switch-box-slider 要素の ::after 疑似要素は、円形のスライダーを作成するために使用されます。
.switch-box .switch-box-slider:after { position: absolute; left: -8px; top: -8px; display: block; width: 24px; height: 24px; border-radius: 50%; background: #eeeeee; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); content: ''; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
.switch-box-input 要素がチェック状態の場合、.switch-box-slider の :after 疑似要素の left 属性が変更され、円形のスライダーが移動します。
.switch-box .switch-box-input ~ .switch-box-label { margin-left: 8px; } .switch-box .switch-box-input:checked ~ .switch-box-slider:after { left: 16px; }
上記は、精巧な純粋な CSS3 スライド スイッチ ボタンのセットの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。