秀逸なアイデアが素晴らしい!CSS3を使ったホバーエフェクトのまとめ
Post on:2012年9月11日
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-01.png)
Original Hover Effects with CSS3
デモページ
10種類のエフェクトで、見出しやテキストを気持ちいいアニメーションで表示します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-02.png)
オーバーレイのかっこいい5種類のエフェクト。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-12.png)
Circle Hover Effects with CSS Transitions
デモページ
円形ならではの面白いアニメーションを使った7種類のエフェクト。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-13.png)
Fancy Hover Effects with CSS3 Transitions
デモページ
シンプルだけどファンシーなアニメーションのエフェクト。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-03.png)
背景画像をアニメーションでスライドし、背景とテキストのカラーを変更します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-04.png)
パネルがフラッシュし、天地から画像とテキストがスライドします。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-05.png)
Sexy Image Hover Effects using CSS3
デモページ
画像をアニメーションで拡大し、マスクを除きます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-06.png)
CSS :hover 'shine effect' (ver 3)
ボタンをホバーすると、きらっと光ります。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-11.png)
パネルをホバーすると、きらっと光ります。こちらは画像を使うタイプ。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-07.png)
5 Cool CSS Hover Effects You Can Copy and Paste
Demo 1, 2, 3, 4, 5
ふわっと浮かんだり、横にテキストがフェードインしたりなど、5つのホバーエフェクト。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-09.png)
ホバーの方向で変化するカラーが異なります。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-10.png)
CSS3 Spinning Social Media Icons
デモページ
アイコンをアニメーションでくるっと回転させます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012091102-08.png)
3D Thumbnail Hover Effects
デモページ
蛇腹のように折りたたんだり、雑誌のようにめくれます。
with jQuery
sponsors