Radiobox.cssは、ラジオボタンを選択した時にアニメーションをつけることができるCSSファイルです。
実際の動きについては、以下よりご確認いただけます。
Radiobox.cssの使い方
1. GitHubからファイル一式をダウンロードします。
2. ダウンロードしたファイルを解凍して、dist/css配下にあるradiobox.min.cssをサーバーにアップロードします。
3. アップロードしたradiobox.min.cssを以下のように読み込みます。ファイルパスは適宜変更してください。
<link rel="stylesheet" href="radiobox.min.css">
4. ラジオボタンに追加したいアニメーションのクラスを指定します。例えば、boingの動きを追加したい場合は、以下のようにクラスを指定します。
<input type="radio" class="radiobox-boing">
追加できるアニメーションの種類は、以下の通りです。
- Boing
- Pump
- Hooray
- Ufo
- Scatman
- Vertigo
- Flash
- Return
- Boom
- Wheel
- Focus
- Tremolo
あとがき
CSSファイルを読み込んでクラスを指定するだけなので、簡単に使うことができますね。フォームにちょっとした動きを加えて、オリジナリティを出したい時にぜひ！