テーマトグル

1348 ワード
codepen css テキストリンク

テーマ変更トグル.
それで、私はちょうど若干の仕事をやっていました、そして、私はチェックボックスを使ってテーマトグルボタンを作りましょう、そして、私はそれが1をつくるのがとても単純であるとわかりました.
ここで私はあなたにそれを共有しています.
我々は、それを作成するいくつかの小さな手順が必要です.
HTML 1でチェックボックス用のワイヤーフレームを作成します
<input type='checkbox' id='check' />
<label for='check'></label>
Step 2 : CSSを作成するには、CSSセレクタのプロパティを使用してチェックボックスとチェックボックスをチェックします.
body{
  top: 50%;
  left: 50%;
  position: absolute;
  background-color: #000;
}
input[type=checkbox]{
  display:none;
}
label{
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));;
  display: block;
  border-radius: 100px;
  position: relative;

}
label::after{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 5px;
  left: 5px;
  background-color: #fff;
  border-radius: 50%; 
  transition: all 0.5s;
  transform: translateX(0px);
}


input[type=checkbox]:checked + label::after{
    transition: all 0.5s;
    transform: translateX(50px);
    background-color: #000;
}


.dark{
  postion: absolute;
  margin-top: 34px
}
それは、ここでは、この小さなコードからの結果です.
[アルゴリズムlog]白駿1436
[伯俊/BOJ]12934回転ゲーム[Gold 5]