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ファイルを読み込んでクラスを指定するだけなので、簡単に使うことができますね。フォームにちょっとした動きを加えて、オリジナリティを出したい時にぜひ！