5 つのクールな CSS ホバー効果。ジャンプ、ズームイン、回転、フェードイン_html/css_WEB-ITnose

退屈なサイトに活気をもたらします

ホバー効果は、Web ページに動的効果を追加し、サイトをより動的にすることができます。元のアプローチでは、JavaScript を使用してこれらの動的な効果を実現することでしたが、CSS3 の導入と最新のブラウザのサポートにより、純粋な CSS コードを使用してこれらの興味深い効果を実現できるようになりました。いわゆるモダンブラウザとは、Mozilla や Webkit を中心としたブラウザを指しますが、IE の性能は若干物足りないため、FireFox、Safari、Chrome などを使用して効果を確認してください。ここでは、非常にクールな純粋な CSS ホバー効果を 5 つ紹介します。

上にジャンプ

この効果は、ページ上に画像が横に並んでいるシーンに非常に適しています。波のような効果が得られます。

この効果の実装は非常に簡単で、これを実現するには多くの方法があります。中心的な実装方法は次のとおりです。最初にすべての画像にマージを設定し、ホバリング時に対応する画像のマージ値を減らします。上にジャンプする効果が得られます。

この効果は写真だけでなく、横に配置された一般的なナビゲーション バーにも適用できます。

エフェクトの透明効果は必要ありません。透明属性を設定しなくても、ホバリング時のジャンプ効果には影響しません。

CSS コード:

.ex1 img{      border: 5px solid #ccc;      float: left;      margin: 15px;      -webkit-transition: margin 0.5s ease-out;      -moz-transition: margin 0.5s ease-out;      -o-transition: margin 0.5s ease-out;  }     .ex1 img:hover {      margin-top: 2px;  }

デモを見る

階層化とズーム

この効果は、マウスを上から下に移動すると、各画像がゆっくり拡大されてから元の状態に戻ります。

この効果を実現するには、まず元の画像を表示するときにサイズを縮小し、マウスをホバーしたときに画像のサイズを拡大します。

画像が中央に表示されるため、マウスをホバーすると画像の余白も増え、画像を拡大すると中央に表示されます。

CSS コード

/*Example 2*/ #container {      width: 300px;      margin: 0 auto;  }     #ex2 img{      height: 100px;      width: 300px;      margin: 15px 0;        -webkit-transition: all 1s ease;       -moz-transition: all 1s ease;        -o-transition: all 1s ease;    }         #ex2 img:hover {        height: 133px;         width: 400px;         margin-left: -50px;        }

デモを見る

テキスト フェードイン

同様の効果は通常、JavaScript を使用して実現されます。要素の 1 つにカーソルを置くと、別の要素に何らかの変化が生じます。この例では、この効果を実現するために、まず画像とテキストを div に配置し、次に div の色を透明、行の高さを 0px に設定します。ホバー時にテキストが表示されるように色と行の高さのプロパティを変更します。

CSS コード

#ex3 {      width: 730px;      height: 133px;      line-height: 0px;      color: transparent;      font-size: 50px;      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;         font-weight: 300;      text-transform: uppercase;      -webkit-transition: all 0.5s ease;      -moz-transition: all 0.5s ease;      -o-transition: all 0.5s ease;  }     #ex3:hover {      line-height: 133px;       color: #575858;    }       #ex3 img{       float: left;        margin: 0 15px;     }

デモを見る

回転した画像

この効果は非常に簡単に実現できますが、特にギャラリーのサムネイルにとっては非常に重要な効果であるためです。この効果には、いくつかの新しい CSS スタイルを使用しました。この例では、ボックスシャドウ、トランジション、およびトランスフォームを使用します。 Transform は回転部分を実装することであり、Transition は効果をより滑らかにすることです。

CSS コード

#ex4 {      width: 800px;      margin: 0 auto;   }       #ex4 img {       margin: 20px;        border: 5px solid #eee;        -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);        -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);        box-shadow: 4px 4px 4px rgba(0,0,0,0.2);        -webkit-transition: all 0.5s ease-out;        -moz-transition: all 0.5s ease;         -o-transition: all 0.5s ease;     }           #ex4 img:hover {         -webkit-transform: rotate(-7deg);         -moz-transform: rotate(-7deg);         -o-transform: rotate(-7deg);     }

デモを見る

フェードと反射

このエフェクトは比較的複雑なエフェクトです。まず、初期の透明度を設定して、ホバリング時に透明度をデフォルト値に戻します。さらに、エッジに光るエフェクトと反射エフェクトが表示されます。画像 (Webkit をコアとして使用する場合のみ) はブラウザーで動作します)。

反射効果についてあまり詳しくない場合は、この記事 (CSS を使用した画像の反射) を参照してください。

CSS コード

#ex5 {      width: 700px;      margin: 0 auto;      min-height: 300px;   }       #ex5 img {       margin: 25px;        opacity: 0.8;         border: 10px solid #eee;            /*Transition*/        -webkit-transition: all 0.5s ease;         -moz-transition: all 0.5s ease;          -o-transition: all 0.5s ease;             /*Reflection*/          -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));       }              #ex5 img:hover {        opacity: 1;         /*Reflection*/    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));         /*Glow*/     -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);     -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);      box-shadow: 0px 0px 20px rgba(255,255,255,0.8);    }

デモを見る

概要

テスト後、これらの効果は、Webkit をコアとして使用するブラウザーで最もパフォーマンスが高く、次に Mozilla が続き、IE は最悪です。 IE9の方が効果は高いですが、他のサードパーティのJSライブラリが必要です。上記の 5 つの純粋な CSS ホバー効果は、デザインのインスピレーションをもたらすはずです。これらの CSS スタイルを包括的に使用し、他の CSS を追加して興味深い効果を生み出すことができます。本当に素晴らしい CSS エフェクトをお持ちの場合は、ぜひディスカッションに参加してください。

編集者メモ

上記の 5 つの CSS ホバー効果はすべて最新の CSS3 効果を適用しており、これらの CSS を適用すると非常に美しい効果が表示されます。 IE9 では遷移と変換の 2 つの効果がサポートされていないため、IE9 ではこれら 5 つの効果のパフォーマンスが低下することに注意してください。