多数のマウスホバーエフェクトが使えるcssライブラリ「Hover.css」の使い方
マウスホバー時のエフェクトを手軽に使える「Hover.css」というcssライブラリを発見。
導入から使用まで、とても簡単にできたのでその方法をご紹介したいと思います。
Hover.css デモ
下記のデモサイトからすべてのエフェクトを確認できます。
下準備
下記のサイト内、「Download ZIP」からファイルをダウンロードします。
css 読み込み
ダウンロードしたzipファイルを解凍後、cssフォルダ内にある「hover-min.css」を使用するので、<head>内に以下のように記述します。
|
1 |
<link href="css/hover-min.css" rel="stylesheet" media="all"> |
アイコンを使う場合は別途Font Awesome を読み込みます。
|
1 |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all"> |
htmlの記述
使用方法はホバーエフェクトを実装したいhtnlタグ内に、Hover.cssにあるclass名を追加するだけです。
詳細な使い方はこちらのチュートリアルから確認できます。
|
1 2 3 4 5 6 7 8 |
<!-- テキストリンク --> <a class="hvr-wobble-vertical" href="#">縦に揺れるリンク</a> <!-- ボタン型リンク --> <a class="hvr-wobble-vertical button" href="#">縦に揺れるボタン</a> <!-- 画像 --> <img class="hvr-wobble-vertical" alt="縦に揺れる画像" src="画像URL" /> |
ただし、デモサイトのようなボタン型に装飾するcssは含まれていないため、別途クラスなどを作っておく必要があります。
|
1 2 3 4 5 6 7 8 |
.button { margin: .4em; padding: 1em; cursor: pointer; background: #e1e1e1; text-decoration: none; color: #666; } |
まとめ
色々なホバーエフェクトを気軽に導入できるので、まるっと読み込むもよし、使用したいエフェクトのcssのみ使用するもよし、とっても便利なcssライブラリでした。
複数のクラスをつけてかけ合わせることもできるので、試してみてはいかがでしょうか。
