ボタンなどの要素にカーソルを合わせた際の様々なホバーエフェクトを「Hover.css」を用いて超簡単に実装する方法について紹介します！
目次
「Hover.css」のダウンロード&実装
ianlunn.co.uk/articles/hover-css-tutorial-introduction/
上記のダウンロードサイトにアクセスし、"DOWNLOAD"ボタンをクリックして「Hover-master.zip」という zip形式のフォルダをダウンロードしてください。
ダウンロードが完了したら.zipフォルダを解凍していき、「css」フォルダの中にある「hover.css」 というファイルをホームページ内のレジストリに配置して、実装したいページの＜head＞＜/head＞内に以下のような 行を追加してcssを読み込んでください。
<link href="../css/hover.css" rel="stylesheet">
※ hover.cssを配置した場所を指定してください。
あとは以下に示すホバーエフェクトの実装例を参考に、実装したい ホバーエフェクトに対応するclass属性を、以下のように要素に与えるだけでエフェクトを実装することができます！
<a href="#" class="hvr-grow">Grow</a>
<a href="#" class="hvr-shrink">Shrink</a>
<a href="#" class="hvr-pulse">Pulse</a>
※ 各ホバーエフェクトに対応するclass属性を確認したい際は、 「右クリック」→「ページのソースを表示」をクリックし、このページのhtml文から確認してください。
↓ 以下、実装例
2D Transitions
Grow
Shrink
Pulse
Pulse Grow
Pulse Shrink
Push
Pop
Bounce In
Bounce Out
Rotate
Grow Rotate
Float
Sink
Bob
Hang
Skew
Skew Forward
Skew Backward
Wobble Horizontal
Wobble Vertical
Wobble To Bottom Right
Wobble To Top Right
Wobble Top
Wobble Bottom
Wobble Skew
Buzz
Buzz Out
Background Transitions
Fade
Back Pulse
Sweep To Right
Sweep To Left
Sweep To Bottom
Sweep To Top
Bounce To Right
Bounce To Left
Bounce To Bottom
Bounce To Top
Radial Out
Radial In
Rectangle In
Rectangle Out
Shutter In Horizontal
Shutter Out Horizontal
Shutter In Vertical
Shutter Out Vertical
Border Transitions
Border Fade
Hollow
Trim
Ripple Out
Ripple In
Outline Out
Outline In
Round Corners
Underline From Left
Underline From Center
Underline From Right
Reveal
Underline Reveal
Overline Reveal
Overline From Left
Overline From Center
Overline From Right
Shadow and Glow Transitions
Shadow
Grow Shadow
Float Shadow
Glow
Shadow Radial
Box Shadow Outset
Box Shadow Inset
Speech Bubbles
Bubble Top
Bubble Right
Bubble Bottom
Bubble Left
Bubble Float Top
Bubble Float Right
Bubble Float Bottom
Bubble Float Left
Curls
Curl Top Left
Curl Top Right
Curl Bottom Right
Curl Bottom Left
これで超簡単にホバーエフェクトを実装できました！
これらのギミックにより、さらにユニークなホームページになること間違いなしですね！( ´∀｀)
