ラジオボタン選択時にアニメーションを追加することができる「Radiobox.css」

ラジオボタン選択時にアニメーションを追加することができる「Radiobox.css」

ラジオボタン選択時にアニメーションを追加することができる「Radiobox.css」

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です