CSS・CSS3 2014-11-27

CSS3を利用した40種類以上のアニメーションを実装できるHover.css

hover

今回は、40種類以上のCSSアニメーションを実装できるHover.cssのご紹介です。
こちらのスタイルシートを利用すれば、アニメーションさせたい要素にHover.cssのクラス名などを付け加えるだけで、簡単にアニメーションを実装が出来ます。
CSS3などを利用した40種類以上も収録されていますので、ボタン要素などに利用すれば簡単にCSSを利用したホバー効果が実装出来ますね。

ライセンスは、MITラインセンスとなっており、個人・商業とも利用可能です。
なので、CSSに記載されている著作情報は消さないようとのことですね。
デモサイトも用意されているようですし、下記サイトよりダウンロードリンクもあるようです。

デモサイト&ダウンロード

Hover.css利用方法

利用方法は、こちらよりまず必要ファイルをダウンロードします。

必要ファイルの読み込み

先ほどダウンロードしたフォルダにあります、hover.cssをhead内に読み込みます。
ファイルの階層などは、ご自身の環境に合わせてください。

<head>
    <link href="css/hover.css" rel="stylesheet">
</head>

要素にマウスオーバーエフェクトを加える

最後にマウスオーバーのエフェクトを加えたい要素にクラス名を加えます。
今回は、a要素に【pulse-grow】というエフェクトのクラス名を加えています。

<a href="" class="pulse-grow">マウスオーバー</a>

上記までで実装は、完了です。
実際に動作するか確認してみてください。

デモサイト&ダウンロード

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS hunterxhunter

HUNTER×HUNTER バトルオールスターズ VS.シャウアプフ(上級) を攻略したパーティメンバー

NEXT seamless-patterns

Photoshop 40種類の斜め・縦ストライプなどのシームレスパターン