デモ
すべてのファイル
まず、入力タイプのチェックボックスにこの機能があると言わなければなりません。
選択されている場合（チェックマークがあります）、要素には新しいチェック属性が割り当てられます。
この効果に基づいて要素を構築します。
まず、入力自体とラッパーについて説明します
<div class="switcher"> <input id="sw" type="checkbox" class="switcher-value"> <label for="sw" class="sw_btn"></label> <div class="bg"></div> </div>
label要素はIDによって特定の入力に厳密にバインドされているため、スライダーとしてラベル要素を使用します。 つまり、ラベルをクリックしました-カウントし、クリックして入力をチェックしました。
クラスbgを持つdivは単なる背景です。
主なスタイルを説明します
.switcher { width: 124px; height: 49px; cursor: pointer; position: relative; } .switcher * { transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; } .switcher .sw_btn { background: url('btn.png') 0% 0% no-repeat; width: 49px; height: 49px; display: block; cursor: pointer; z-index: 1; position: relative; } .switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; } .switcher input.switcher-value { display: none; } .switcher .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }
コードからわかるように、入力自体を非表示にします。 価値の管理者としてのみ必要です。
（ところで、この入力の値として将来のスイッチの値を取得できます）
背景に、スイッチオフの画像（ 'bg-off.png）を配置します。
また、スムーズな切り替えのために遷移プロパティを設定します。
そして今-最も興味深い
.switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; } .switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }
これらの2行とスイッチ=）
最初の行は、クラスsw_btnの要素のインデントが68pxであることを意味します。
これは、INCLUSED入力の直後に続きます（これは確認済みです）。
2番目のことは、クラスsw_btnの要素に続くクラス.bgの要素の背景を変更する必要があることです。
INCLUSED入力の直後に移動します。
無効な入力の場合、これらの2つのプロパティは機能しません。
全コード
.switcher { width: 124px; height: 49px; cursor: pointer; position: relative; } .switcher * { transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; } .switcher .sw_btn { background: url('btn.png') 0% 0% no-repeat; width: 49px; height: 49px; display: block; cursor: pointer; z-index: 1; position: relative; } .switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; } .switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; } .switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; } .switcher input.switcher-value { display: none; } .switcher .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }
そのため、いくつかの小さなトリック