sounansa.net

アニメーションがこの上なくオシャレなチェックボックスとラジオボタン

スポンサーリンク

Pocket

チェックボックスやラジオボタンを超オシャレにするテクニックです。javascript、css、SVGを組み合わせて実現しています。

こんなかわいいフォームだと、アンケートや問い合わせも楽しくなりますね。

アニメーションで動きを加えるとフォームもこんなにカワユくなるなんて!すっごく勉強させられました。

これ流行りそうですね。

デモはこちら

ラジオボタン

クリックするとくるんと丸を描くアニメーションのラジオボタン
checkbox1

クリックすると丸く塗りつぶすアニメーションのラジオボタン
checkbox2

クリックすると斜めに塗りつぶすアニメーションのラジオボタン
checkbox7

チェックボックス

斜めに線を書くアニメーションのチェックボックス
checkbox3

クリックすると横に塗りつぶすアニメーションのチェックボックス
checkbox4

クリックすると2本の取り消し線を引くアニメーションのチェックボックス
checkbox5

クリックするとチェックマークを引くアニメーションのチェックボックス
checkbox6

バツを描くアニメーションのチェックボックス
checkbox8

ソースはこちらからダウンロードできます。
http://tympanus.net/codrops/2013/10/15/animated-checkboxes-and-radio-buttons-with-svg/

スポンサーリンク

comments powered by Disqus