楽しいだけで十分です

HTMLとCSS3でつくるトグルスイッチのメモ

CODEPREP | HTMLとCSS3でつくるトグルスイッチのメモです。


外枠の角を丸くする

  • border-radiusで、heightの半分を指定することで、半円を作ることができる

チェックボックスがチェックされている状態

  • 擬似セレクタ:checkedで指定できる

すぐ隣にある要素を指定する

  • 隣接セレクタ+で指定する

スイッチをアニメーションさせる

  • transformで設定した効果に対して、transition-durationプロパティを利用することでアニメーションの時間効果を調整できる

ラベルテキストを描画エリア外に移動する

  • スイッチがクリックされている状態の時に一時的に横幅を広げることで、このような ぬるっと 動くように見える

    • 横幅を広げるには、要素:active::after { width: 60%; }のように、クリックされている状態に::after擬似要素を使ってwidthを追加すればいい
yinm

WRITTEN BY yinm

I'm a software engineer.