Hover.cssを使用すればボタンにアニメーションをつける際に便利だと思い覚書
Hover.cssをダウンロード
Hover.cssをダウンロードします。下記のGitHubよりダウンロード
http://ianlunn.github.io/Hover/
Hover.cssを読み込む
読み込みを行いボタンのCSSを記述する
※今回は直に書きましたので省略します。
<head> <link rel="stylesheet" href="hover.css"> </head>
要素にクラスをつける
あとはclassの指定を行えばOKです。
ちなみにclass="myButton"はボタンの形を定義してやってます。
<h2>2D変化</h2> <a href="#" class="myButton hvr-grow">Grow</a> <a href="#" class="myButton hvr-shrink">Shrink</a> <a href="#" class="myButton hvr-pulse">Pulse</a>
スポンサーリンク
実行結果
See the Pen adJbeV by Atsushi (@office606) on CodePen.
本当に簡単にボタンにアニメーションを追加することができました。
以前、覚書を行ったanimate.css同様ライブラリとして使用すればより効果が期待できるかなと思ってます。ちなみにHover.cssを使用する際の詳しい効果説明はこちらで確認してください。
どのclassでどんな効果になるのかを確認することができます。
ライセンスは下記のようになります。
Hover.css is open source, and made available under a MIT License. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
Placing author information in your stylesheet, credits page or humans.txt is much appreciated.
まぁMITライセンスなので気軽に使えますね！
スポンサーリンク
Originally posted 2016-01-05 17:41:43.