chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2015/01/21

[CSS]50種類以上!マウスホバー時のエフェクトを集めたCSS「Hover.css」

50種類以上のホバーエフェクトを集めたCSS「Hover.css」をご紹介致します。多種多様なエフェクトが実装されており、使用ももちろん、アニメーションキーフレーム等の勉強にも良いです。対応ブラウザはCSS3に対応しているブラウザです。ライセンスはMITです。

ホバーエフェクト

今回ご紹介するのは、マウスホバー時のエフェクトを集めたCSS「Hover.css」です。

50種類以上もホバーエフェクトを実装されており、またクラスをhtmlに入れるだけなので非常に簡単です。

hover-css-1

MITライセンスとなっていますので、実際の案件では少しカスタマイズすれば案件でも使用できるものも多いかと思います。

アニメーションキーフレーム、transform等も書かれておりますのでCSS3のアニメーションの勉強にも非常に良いと思います。

CSS3を使用しているので、IE8等は対応してません。またホバーの種類によってはIE10以下のサポート外の部分もあるようです。

Sass/Lessでのソースコードも配布されております。

使い方

使い方といっても、CSSを読み込むだけですが一応。

GitHubにアクセスして一式をダウンロードします。

CSS読み込み

<link href="css/hover.css" rel="stylesheet" media="all">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

アイコンはFont Awsomeを使用しているので、こちらも読み込ませます。

アイコンエフェクトを使用しない場合は、フォント読み込みのエラーが出るので、

hover.cssのアイコン部分に該当する部分をコメントアウトしておくといいですね:)

基本クラスは.hvr-xxxとなっております。

 

 

Hover.css: http://ianlunn.github.io/Hover/

GitHub: https://github.com/IanLunn/Hover

ライセンス: MIT

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加