スイッチスライドスイッチボタンの効果を達成するために、純粋なCSS3のコード

HTML構造

XML / HTMLコードをクリップボードにコピー

1. <のdivクラス= "コンテナ">  
2.         <のdivクラス= "bg_con">  
3.             <入力されたID = "checked_1" タイプ= "チェックボックス" クラス= "スイッチ" />  
4.             </ label>は<= "checked_1" のラベル>  
5.         </ div>  
6.     </ div>  

CSSコードアニメーションCSS3の実現を切り替えるとき,:その前に小さな白いドット、トランジション効果後,:色を担当しています。

CSSコードをクリップボードにコピー

1. 。スイッチ{   
2.         表示：なし;   
3.     }   
4.     ラベル{   
5.         位置：相対;   
6.         表示ブロック;   
7.         パディング：1ピクセル。   
8.         国境半径：は24px;   
9.         高さ：22px;   
10.         マージン下：15ピクセル;   
11.         背景色：#eee;   
12.         カーソル：ポインタ;   
13.         垂直整列：トップ。   
14.         -webkit-ユーザーを選択：なし;   
15.     }   
16.     ラベル：前{   
17.         内容： '';   
18.         表示ブロック;   
19.         国境半径：は24px;   
20.         高さ：22px;   
21.         背景色：白;   
22.         -webkit-変換：スケール（1、1）。   
23.         -webkit-遷移：全て0.3秒容易さ;   
24.     }   
25.     ラベル：後{   
26.         内容： '';   
27.         位置：絶対;   
28.         トップ：50％;     
29.         左：50％;     
30.         マージントップ：-11px;     
31.         margin-left：-11px;   
32.         幅：22px;   
33.         高さ：22px;   
34.         国境半径：22px;   
35.         背景色：白;   
36.         ボックスシャドウ：1ピクセル1ピクセル1ピクセル1ピクセルのRGBA（0,0,0,0.08）。   
37.         -webkit-変換：移動X（-9px）。   
38.         -webkit-遷移：全て0.3秒容易さ;   
39.     }   
40.     .switch：〜ラベルにチェック：{後   
41.         -webkit-変換：移動X（9px）。   
42.     }   
43.     .switch：〜ラベルにチェック：{前   
44.         背景色：緑;   
45.     }  
46. 新しいビルドフロントエンドの学習qun438905713、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。