カスタムトグルスイッチを作成する方法

10580 ワード
toggle switch css tutorial テキストリンク
CSSを使用してシンプルなカスタマイズトグルスイッチを作成しましょう.最初に私がこれを作成しようとしていたとき、私は非常に混乱している多くの開発者がこのボタンを作成しているので、それはどのようにこの作業を説明していない.
だから少し苦労した後、私はこれを作成する方法を学びました、私はあなたと共有したい.
私はあなたによってこの技術を学んだCodepen , そのような興味深いペンがもっとあります.

前提知識
基礎講座HTML , CSS (特にPseudo Elements )

動作方法

ラベルを入力に割り当てるとき、ラベルをクリックすることで入力をターゲットにすることができます.
それは我々が利用するつもりです、そして、これによって、我々はチェックボックスと同じ行動をするカスタムスイッチに我々のラベルを変えることができます.

始めましょう

これらは、このボタンを作成するために我々が従うつもりです.

HTML構造を作成する

この段階では、入力チェックボックスとラベルに割り当てられているHTML要素を作成しますが、内部の内容は空にする必要があります.

参照符号を以下に示す.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

<body>

<input type="checkbox" name="switch" id="switch">
<label for="switch"></label>

</body>

</html>

2 .入力要素を隠す
以前に言ったように、入力要素を隠すことになりますので、チェックボックスを必要としません.

input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}

ボタンの体

我々は、スイッチの本体またはボールが動く外側の部分をつくります.

参照符号を以下に示す.

label {
  display: block;
  width: 500px;
  height: 150px;
  background-color: #477a85;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
  box-shadow: 0 0 20px #477a8550;
}

トグルボールを作る

今度は、擬似要素を使用してトグルボールを作成します::after .

参照符号を以下に示す.

label::after {
  content: "";
  width: 120px;
  height: 120px;
  background-color: #e8f5f7;
  position: absolute;
  border-radius: 70px;
  top: 15px;
  left: 15px;
  transition: 0.5s;
}
この段階で我々の仕事の80 %が行われ、今我々はちょうど我々のスイッチを動作させるアニメーションを追加する必要があります.

アニメーションの追加
ラベルを切り替えると、チェックボックスもトグルされます.
  • 今、我々は条件を追加します、チェックボックスがチェックされるとき、我々のボールは右に移されなければなりません.

    •    input:checked + label:after {
   left: calc(100% - 10px);
   transform: translateX(-100%);
   }
  • ボタントグルで背景を変更するには

    • 
   input:checked + label {
   background-color: #243d42;
   }
  • 今より滑らかな磁気効果をしたい場合.ボールがアクティブになると、その幅はしばらくの間増加します.要素をクリックするとアクティブになります.我々は、使用することでこれを行うことができます:active セレクタ.
    •     label:active:after {
    width: 160px;
    }

    出力プレビュー


    デモを試してください

    私を見つける
    android dagger 2注入mvpアーキテクチャ
    [HTML]20303マイページ