Radiobox.cssで楽しいアニメーションラジオボタンを作成する

の デフォルトのHTML5ラジオボタン かなり退屈です。する方法があります それらをカスタマイズする CSS3を使うが、ほとんどのテクニック ルックスだけに焦点を当てる.

Radiobox.css に焦点を当てる ルックス そして スタイル ラジオ入力へのカスタムCSS3アニメーションの追加.

このライブラリは 完全に無料 そして オープンソース, GitHubでダウンロードできます。このCSSライブラリでは、次のものから選ぶことができます。 12種類以上のアニメーション ラジオボタンに適用されるもの.

カスタムCSSスタイルがなくても、 通常のラジオ入力のように見える. しかし、ユーザーがボタンをクリックして選択すると、 クレイジーなアニメーション効果を得る. 見ることができます 実例 その名前の横にある各スタイルをデモするメインのRadioboxページに.

Radioboxをインストールすることができます npmまたはbowerからまっすぐ, あるいはあなたのマシンにローカルにファイルをダウンロードしてください。 GitHub すべてのファイルをCDNでホストする 何もダウンロードせずに遊んでみたい場合.

あなたが必要とする唯一のファイルは radiobox.min.css どちらがいいですか ドキュメントの頭の中に. そこから、あなただけ 単純なクラスを追加する 必要なアニメーションに応じて各ラジオボタンに.

これが コードスニペット のために “ボイン” 効果：

に注意してください “ボイン” アニメーションは持っていますか 独自のCSSファイル 呼ばれる boing.min.css. この 含める必要があります ページにその効果を使用する予定の場合.

Radioboxをダウンロードするときは、 デモディレクトリを入手する と これらすべての効果のライブデモ. 簡単にできます コードをコピー/貼り付け 手間をかけずに機能させるには、ページに直接アクセスしてください。.

にとって 完全な文書, チェックアウト 主なレポ 一緒に ライブデモサイト. あなたがクリエイターに連絡したい場合は、あなたはから電子メールを送信することができます 720kbのウェブサイト またはTwitter経由のメッセージ @ 720kb_.