CSS は Apple のスムーズなスイッチボタン効果を模倣します

1. コード分析

1.1 HTMLコード分析

<div class="チェックボックス">
  <div class="inner" id="inner">
    <div class="toggle" id="toggle"></div>
  </div>
</div>

最も外側のチェックボックスはボタン全体、内側は ON の下の緑色のボックスが占める領域、トグルはクリック可能な ON および OFF 領域です。

1.2 本文のフォントと背景色を設定するための CSS コード分析

体{
  マージン: 0;
  パディング: 0;
  フォントファミリー: サンセリフ;
  背景: #dcdcdc;
}

ボタンの背景色、位置、円形の境界線、上部と下部の境界線の色と太さを設定します

.チェックボックス{
  位置: 絶対;
  上位: 50%;
  左: 50%;
  変換: translate(-50%, -50%);
  幅: 100ピクセル;
  高さ: 50px;
  境界線の半径: 25px;
  背景: 線形グラデーション(0度, #d8d8d8, #cccccc);
  上ボーダー: 0.02em 実線 #ececec;
  ボーダー下部: 0.02em 実線 #ececec;
}

緑の背景領域の上、下、左、右の位置を設定して、幅と高さを決定します。幅と高さはここでは設定されません。デフォルトは自動です。

背景、円形の境界線、影を設定する

.チェックボックス .inner{
  位置: 絶対;
  /* 幅と高さが設定されていないため、これは可能です*/
  上: 10px;
  左: 10px;
  右: 10px;
  下: 10px;
  背景: 線形グラデーション(0度, #a5a5a5, #717171);
  境界線の半径: 20px;
  ボックスシャドウ: インセット 0 0 15px rgba(0,0,0,.5);
}

ON OFFボタンのサイズ、位置、色、背景、影、上部と下部の境界線のスタイルを設定し、ボタンのアニメーション時間を0.5秒に設定します。

.チェックボックス .インナー .トグル{
  位置: 絶対;
  上: -3px;
  左: -3px;
  幅: 36ピクセル;
  高さ: 36px;
  境界線の半径: 50%;
  背景: 線形グラデーション(0度, #ccc, #e4e4e4);
  ボックスの影: 0 4px 6px rgba(0,0,0,.2);
  ボックスのサイズ: 境界線ボックス;
  上ボーダー: 0.04em 実線 #ececec;
  ボーダー下部: 0.01em 実線 #ececec;
  遷移: 0.5秒;
}

OFF スタイルを設定し、幅と高さは上、下、左、右の配置によって決定され、背景、円形の境界線を設定し、 line-heightを使用してフォントを垂直中央に設定します。

.checkbox .inner .toggle:before{
  内容: "オフ";
  位置: 絶対;
  上: 4px;
  左: 4px;
  右: 4px;
  下: 4px;
  背景: 線形グラデーション(0度, #e4e4e4, #ccc);
  境界線の半径: 50%;
  テキスト配置: 中央;
  フォントサイズ: 10px;
  行の高さ: 28px;
  色: #a9a9a9;
}

クリック後のボタンのフォントをONに設定します。他のプロパティが書き込まれないのは、他のプロパティがcheckbox .inner .toggle:beforeを継承しているためです。

.checkbox .inner.active .toggle:before{
  内容: "ON";
  色: #00d22d;
}

ボタンをクリックすると、スライダーが右に移動し、背景色が変更されます。変更時間は 0.5 秒です。

.checkbox .inner.active .toggle{
  左: 47px;
}
.チェックボックス .inner.active{
  背景: 線形グラデーション(0度, #00d22d, #158a00);
}

1.3 JavaScriptコード分析

<スクリプト>
  inner = document.getElementById('inner'); とします。
  トグルをinner.children[0]にします。
  トグル.addEventListener('クリック', ()=>{
    if(inner.classList.contains('active')){
      inner.classList.remove('active');
    }それ以外 {
      inner.classList.add('アクティブ');
    }
  })
</スクリプト>

まず、内側とトグル、背景色のボックス、丸いボタンを取得します
ボタンのトグルにクリックイベントを登録し、ON OFFボタンをクリックして有効にします
inner がアクティブの場合、つまり、内部要素にアクティブクラスが含まれている場合は、それを削除します。含まれていない場合は、それを追加します。いずれの場合も、反対の操作を実行します。
インナーがアクティブになると、トグルが右に移動し、インナーの背景色が変わります。CSSで設定します。
完了です。手順は次のとおりです。

2. ソースコード

2.1 HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <link rel="スタイルシート" href="2020_12_24.css">
</head>
<本文>
<div class="チェックボックス">
  <div class="inner" id="inner">
    <div class="toggle" id="toggle"></div>
  </div>
</div>
<スクリプト>
  inner = document.getElementById('inner'); とします。
  トグルをinner.children[0]にします。
  トグル.addEventListener('クリック', ()=>{
    if(inner.classList.contains('active')){
      inner.classList.remove('active');
    }それ以外 {
      inner.classList.add('アクティブ');
    }
  })
</スクリプト>
</本文>
</html>

2.2 CSSソースコード

体{
  マージン: 0;
  パディング: 0;
  フォントファミリー: サンセリフ;
  背景: #dcdcdc;
}
.チェックボックス{
  位置: 絶対;
  上位: 50%;
  左: 50%;
  変換: translate(-50%, -50%);
  幅: 100ピクセル;
  高さ: 50px;
  境界線の半径: 25px;
  背景: 線形グラデーション(0度, #d8d8d8, #cccccc);
  上ボーダー: 0.02em 実線 #ececec;
  ボーダー下部: 0.02em 実線 #ececec;
}
.チェックボックス .inner{
  位置: 絶対;
  /* 幅と高さが設定されていないため、これは可能です*/
  上: 10px;
  左: 10px;
  右: 10px;
  下: 10px;
  背景: 線形グラデーション(0度, #a5a5a5, #717171);
  境界線の半径: 20px;
  ボックスシャドウ: インセット 0 0 15px rgba(0,0,0,.5);
}
.チェックボックス .インナー .トグル{
  位置: 絶対;
  上: -3px;
  左: -3px;
  幅: 36ピクセル;
  高さ: 36px;
  境界線の半径: 50%;
  背景: 線形グラデーション(0度, #ccc, #e4e4e4);
  ボックスの影: 0 4px 6px rgba(0,0,0,.2);
  ボックスのサイズ: 境界線ボックス;
  上ボーダー: 0.04em 実線 #ececec;
  ボーダー下部: 0.01em 実線 #ececec;
  遷移: 0.5秒;
}
.checkbox .inner .toggle:before{
  内容: "オフ";
  位置: 絶対;
  上: 4px;
  左: 4px;
  右: 4px;
  下: 4px;
  背景: 線形グラデーション(0度, #e4e4e4, #ccc);
  境界線の半径: 50%;
  テキスト配置: 中央;
  フォントサイズ: 10px;
  行の高さ: 28px;
  色: #a9a9a9;
}
.checkbox .inner.active .toggle:before{
  内容: "ON";
  色: #00d22d;
}
.checkbox .inner.active .toggle{
  左: 47px;
}
.チェックボックス .inner.active{
  背景: 線形グラデーション(0度, #00d22d, #158a00);
}

Apple のスムーズスイッチボタン効果を模倣した CSS に関するこの記事はこれで終わりです。CSS スムーズスイッチボタンに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: マウスを動かしたときにセカンダリメニューバーを実装するために HTML+CSS を使用する例

>>: フロントエンドエンジニアが作ったクールなインタラクティブウェブサイトを推薦します