CSS3ホバー効果。 チュートリアルチュートリアル

このマニュアルを作成するときの目標は、3ダースの異なるエフェクトを取得することでした。一部は非常に一般的で、一部は私が発明したものです。仕事とそれらを実践する方法。 このため、記事は段階的に詳細に出てきましたが、各詳細を説明し、分解することが重要でした。

デモ資料はこちらです。

警告：エフェクトは、CSS3機能をサポートする最新のブラウザーでのみ機能します。

仕事の準備。

したがって、エフェクトを作成するには、次の単純なデフォルトのhtml構造が必要です。

<div class="effect> <img src="img/ef1.jpg" alt="Effect #1" /> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> 

ほとんどの効果については変更されませんが、いくつかの場所ではいくつかの変更を行う必要があります。 .effectクラスを持つdivコンテナがあり、その中に、タイトル、説明、この場合は「もっと見る」ボタンを含む画像と.captionクラスを持つコンテナを配置します。 もちろん、最も重要なのは構造を変更してから、CSSコードに適切な変更を加えることです。

構造のデフォルトのcssスタイル （ここでも、考慮する効果に応じて、それらは異なります）：

 .effect { position: relative; width: 300px; height: 200px; overflow: hidden; } .effect img { width: 100%; height: 100%; } .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; } .effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; } .effect .caption p { margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; } 

遷移プロパティの基礎。 効果＃1.1-1.3

例

効果＃1.1は、マウスを画像の上に置くと、.captionコンテナの情報が「ポップアウト」することです。

これを実現するには、最初にこのコンテナを効果のあるコンテナの外側に高く移動する必要があります。 これを行うには、topプロパティを変更し、ブロックのスタイルは次のようになります。

  .effect .caption { position: absolute; top: -100%; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; } 

次のステップは、遷移プロパティを.captionに追加することです。 遷移は、どのプロパティが変化するか、どのくらいの速さ、どの遅延で変化するかを示します。

もっと詳しく考えてみましょう。 これは、エフェクト＃1.1の遷移プロパティがどのように見えるかです：

遷移：すべての0.3秒立方ベジエ（0.4、0、1、1）0秒。

最初の値は、変更を追跡するスタイルプロパティの名前を設定します。 この場合、すべてを設定します-すべてのプロパティが追跡されます。 2番目は、アニメーションに必要な時間を担当します。 3番目-2番目のプロパティで指定された時間の間に、遷移速度がどのように分散されるか：減速する場所、加速する場所。 したがって、たとえば、この場合、アニメーションは最初は高速になり、途中で遅くなり、終わり近くで均一な速度になります。 4番目の値は、アニメーションが遅延して開始するかどうかを決定します。 値が0の場合、遅延はありません。

さらに、このプロパティにはベンダープレフィックスを追加する必要があります。 ブラウザでアニメーションを正しく表示するために必要です。 それはどのように見えますか：

-webkit-transition：すべて0.3sキュービックベジェ（0.4、0、1、1）0s; -ChromeおよびSafari用
-o-transition：すべて0.3sキュービックベジェ（0.4、0、1、1）0s; -オペラ用
-ms-transition：すべて0.3sキュービックベジェ（0.4、0、1、1）0s; -IEの場合
-moz-transition：すべて0.3sキュービックベジェ（0.4、0、1、1）0s; -Firefoxの場合

それらを追加します。

 .effect .caption { position: absolute; top: -100%; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; } 

この記事では、簡潔にするためにプレフィックスを省略しますが、transition、transform、transform-originなどのプロパティにプレフィックスを追加することを忘れないでください。 CSSボタンの下のサンプルコード（またはファイル自体）にもプレフィックスがあります。

そのため、エフェクトを作成するために必要なほとんどすべてを追加しました。初期条件とエンドポイントへの遷移の条件、エンドポイント自体のスタイルのみを追加することです。

 .effect:hover .caption { top: 0px; } 

エフェクト＃1.2も同じように構築され、.captionのみが右から左に「離れ」ます。 これを行うには、.captionスタイルに小さな変更を加えます。

 .effect .caption { position: absolute; top: 0px; left: 100%; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; } .effect:hover .caption { left: 0px; } 

しかし、 効果＃1.3には小さな問題がありました。 .captionは、効果＃1.1のように上から下に移動しますが、同時にもう1つのブロックが下から上に移動します。

この効果を実現するには、html構造に変更を加えます。 下から上に実行されるブロックの.overlayクラスを使用して、空のdivコンテナを作成する必要があります。

 <div class="effect> <img src="img/ef1.jpg" alt="Effect #1" /> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> <div class="overlay"></div> </div> 

.captionのスタイルを変更します。 位置を変更して上から下に移動し、透明度を半分にして背景の透明度の最終値を維持します（最終的に2つのブロックをオーバーラップします）。2つのブロックのうちどちらが「高い」かを示すz-index適用する場合：

 effect .caption { position: absolute; top: -100%; left: 0px; background: rgba(0,0,0,0.35); width: 100%; height: 100%; color: #fff; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; z-index: 10; } 

.overlayのスタイルを追加します。

 .effect .overlay { position: absolute; top: 100%; left: 0px; background: rgba(0,0,0,0.35); width: 100%; height: 100%; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; z-index: 5; } 

変換のエンドポイントを決定するためにのみ残ります：.captionはトップに下がります：0px、そして.overlayは反対に、同じ値に上がります：

 .effect:hover .caption, .effect:hover .overlay { top: 0px; } 

透明度を変更します。 個々の要素の動きを追加します。 効果＃2.1-＃2.3

例

効果＃2.1では、要素は中心から端まで延びています。 基本的なhtml構造を使用します。この構造では、この効果を作成するために、変更を加える必要はありません。

しかし、CSSスタイルでは、変更を加える必要があります。 まず、タイトルとボタンを中央の.captionに移動して、後続の遷移の開始点を設定する必要があります。 さらに、これらの要素はアニメーションのオブジェクトであるため、これらの要素に遷移プロパティを追加する必要があります。

 .effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: 62px; transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: -58px; transition: all 0.3s linear 0s; } 

アニメーションのエンドポイントを設定すると、次のようになります。

 .effect:hover h4, .effect:hover a.btn { top: 0px; } 

最も美しい結果は得られません。 半透明の基板は消えていません。要素は中央に積み重ねられており、見た目も美しくなっています。 移行の助けを借りて、要素の位置だけでなく、たとえばその透明度も変更できるため、移動する必要があるまで、基板と要素の両方を中央に隠すことができます。

透明度と.captionへの移行を追加します。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.5s linear 0s; } 

したがって、.captionを非表示にしたので、少し後にマウスをホバーしたときにのみ表示されるように設定します。 .caption内のすべての要素に透明度を追加する必要があり、それらのコードは次のようになります。

 .effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: 62px; opacity: 0; transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: -58px; opacity: 0; transition: all 0.3s linear 0s; } .effect .caption p { margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; opacity: 0; transition: all 0.3s linear 0s; } 

ホバーすると次のことが起こります。.captionの透明度とその中の要素が不透明度：0から不透明度：1に変わり、同時にタイトルとボタンの位置が変わり始めます：

 .effect:hover h4, .effect:hover a.btn { top: 0px; opacity: 1; } .effect:hover .caption, .effect:hover p { opacity: 1; } 

エフェクト＃2.2と＃2.3は同様の方法で作成されます。エフェクト＃2.2の場合のみ、タイトルとボタンをそれぞれ上から下、下から上に移動し、エフェクト＃2.3の場合はそれぞれ右から左、左から右に移動します。

効果＃2.2を取得するためにコード＃2.1を有効にするために必要な変更：

 .effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: -66px; opacity: 0; transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: 66px; opacity: 0; transition: all 0.3s linear 0s; } 

それ以外の場合、すべてが同じままです。

さて、エフェクト＃2.1からエフェクト＃ 2.3を取得するために、次を変更しましょう。

  font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; left: 300px; opacity: 0; transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; left: -300px; opacity: 0; transition: all 0.3s linear 0s; } .effect:hover h4, .eff-2-3:hover a.btn { left: 0px; opacity: 1; } 

要素の変換と増減について説明しましょう。 効果＃3.1-＃3.3

例

効果＃3.1は、ホバーすると非常に拡大した要素<h4>、<p>および<a>が表示され、徐々に通常のサイズに減少するという事実に基づいています。

html構造は基本的なままです。 スタイルシートの変更に関しては、下降要素にtransformプロパティを追加する必要があります。 変換を使用すると、要素を変換できます。回転、サイズ変更、傾斜、移動、複数のプロパティを組み合わせて、より複雑な効果を作成できます。 これらの効果について、要素の減少/増加を分析します。

このような変換に必要な変換プロパティの値はscale（x、y）です。xはオブジェクトの水平方向の寸法、yは垂直方向の寸法です。 このプロパティを<h4>、<p>および<a>に適用すると、次のようになります。

 .effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; transform: scale(2); transition: all 0.3s linear 0s; } 

ご覧のとおり、この場合のスケール値は2つのパラメーターではなく1つのパラメーターです。つまり、水平要素と垂直要素の両方が2倍になります。

 .effect .caption p { margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; transform: scale(2); transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; transform: scale(2); transition: all 0.3s linear 0s; } 

次に、これらの要素を通常のサイズに縮小することをホバリングします。これには、これらのスタイルを追加します。

 .effect:hover .caption h4, .effect:hover .caption p, .effect:hover .caption a.btn { transform: scale(1); } 

.captionについては、効果の分析＃2.1-＃2.3と同様に、不透明度：0および非常に短い遷移時間に設定し、素材の外観が視聴者をメインアニメーションからそらさないようにします。

 .effect .caption { position: absolute; top: 0; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.2s linear 0s; } .effect:hover .caption { opacity: 1; } 

効果＃3.2は、前のものと同様に構成されますが、マウスをホバーしたときに要素が減少するのではなく増加するという唯一の例外があります。 それらのスケール値を設定します：0.25、他のすべてのスタイルは同じままです。

ただし、 効果＃3.3は、要素の移動とサイズの変更の組み合わせです。 ご覧のとおり、<p>要素はその場所に残り、寸法は変更しません。スタイルは標準のままです。 <h4>と<a>については、タスクをそれぞれ上下に移動し、サイズを小さくします。

 .effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: -100%; transform: scale(0.25); } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: 100%; transform: scale(0.25); } 

ここで、移行を要求する必要がありますが、ここで問題が発生します：要素は最初に-ダウンしてから-サイズを大きくする必要があります。つまり、遅延なしで要素を下げるために遷移を要求し、増加するために遅延を伴う遷移を要求する必要があります。

遷移に複数のスタイルプロパティを設定するのは簡単です。各プロパティのすべてのパラメータを指定することを忘れずに、カンマで区切ってリストするだけです。

トランジション：トップ0.3sリニア0s、トランスフォーム0.3sリニア0.3s。

このルールを残りのスタイルルールに追加します。

 .effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: -100%; transform: scale(0.25); transition: top 0.3s linear 0s, transform 0.3s linear 0.3s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: 100%; transform: scale(0.25); transition: top 0.3s linear 0s, transform 0.3s linear 0.3s; } 

変換のエンドポイントを設定します。

 .effect:hover .caption h4, .effect:hover .caption a.btn { transform: scale(1); top: 0px; } 

以前の2つのエフェクトの画像で.captionを非表示にするだけです。

 .effect .caption { position: absolute; top: 0; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.3s linear 0s; } .effect:hover .caption { opacity: 1; } 

要素をねじる：回転します。 「ピボットポイント」を設定します。 効果＃4.1-＃4.4

例

要素を「ねじる」には、変換プロパティをvalue-rotateとそのパラメーターに設定する必要があります。 回転にはどのようなパラメーターがありますか？ まず、回転軸：X、Y、またはZ。次に、要素が回転する度数。 したがって、たとえば、要素をY軸に沿って30度回転させる場合、ルールは次のようになります。

変換：rotateY（30deg）;

効果＃4.1-＃4.3は、3つの軸それぞれの周りの.caption要素の回転に基づいており、 効果＃4.1から開始します。この場合、.captionはX軸の周りを回転しますが、回転自体はそれほど壮観ではないので、結合しますアイテムのサイズを変更します。

<h4>、<p>、および<a>要素のスタイルと同様に、html構造は基本的なままです。 .captionのスタイルのみが変更されます。まず、新しい変換を追加します。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotateX(0deg); transition: all 0.4s linear 0s; } .effect:hover .caption { transform: rotateX(360deg); } 

これで、マウスをホバーすると、要素が上記の度数だけ回転します。 しかし、私は彼に、スピンするだけでなく、ホバーがなければ消え、ホバーでスピンするだけでなく「泳ぐ」ことも望んでいます。 これを行うには、スケールの値を持つ別の変換を追加します。 2つ以上の変換値を要素に追加するには、ルールを2回記述する必要はありません。これらの値をスペースに入れるだけです。 ホバースタイルでも同じことを行います。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotateX(0deg) scale(0); transition: all 0.4s linear 0s; } .effect:hover .caption { transform: rotateX(360deg) scale(1); } 

これで、.captionは軸を中心に回転するだけでなく、写真の奥からも表示されます。

Effect＃4.2はまったく同じ方法で構築され、回転軸をYに置き換えるだけです。

エフェクト＃4.3もまったく同じ方法で作成されます。 rotateZ（）は、rotate（）の記述に完全に似ているため、スタイルを次のように変更します。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(0deg) scale(0); transition: all 0.4s linear 0s; } .effect:hover .caption { transform: rotate(360deg) scale(1); } 

効果＃4.4はより困難です。 これは、回転とサイズ変更だけでなく、回転が発生する周囲の点の座標の変更、および遷移プロパティの遷移タイミング関数パラメーターの複雑な値にも基づいています。 しかし、順番に始めましょう。

一番下の行は、回転はそれ自体ではできません、それは常にいくつかのポイントに関連して発生するということです。 このポイントのデフォルトの座標は中心、つまり50％50％ですが、ここで.captionの軌跡を変更するためにそれらを変更します。 座標は、transform-originプロパティによって設定されます。 また、transition-timing-function-linearパラメーターの値を使用して遷移を追加しましょう。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(0deg) scale(0); transition: all 1.1s linear 0s; } .effect:hover .caption { transform: rotate(360deg) scale(1); transform-origin: -10% -20%; } 

これで、エフェクトは、非常にオフセットした回転ポイントに対して、Z軸を中心にした非常に遅い.caption回転のように見えます。 効果を複雑にするために、transition-timing-functionの値を3次ベジエ（0.68、-0.55、0.27、1.55）に変更します。これにより、アニメーションの終了が非常に加速され、中間が遅くなり、最後にわずかに戻ります。 最終的なコードは次のようになります。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(0deg) scale(0); transition: all 1.1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s; } .effect:hover .caption { transform: rotate(360deg) scale(1); transform-origin: -10% -20%; } 

スケールと変換元についてもう少し。 効果＃5.1-＃5.4

例

効果の分析＃3.1-＃3.3ですでに書いたように、2つの軸に沿ってスケールを適用するだけでなく、要素の長さと幅を同時に増減させたり、1つの軸に沿ってスケールを適用したりできます。 したがって、たとえば、 効果＃5.1では、 .captionが中心から水平方向に回転するのがわかりますが、その高さは変わりません。

この要素では、<h4>、<p>、および<a>のhtml構造とスタイルは基本的なままです。 .captionのスタイルのみが変更され、X軸に沿ってのみ縮小する必要があります。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: scaleX(0); transition: all 0.4s linear 0s; } 

そして、ホバーで増加が起こるために：

 .effect:hover .caption { transform: scaleX(1); } 

エフェクト＃5.2も同じ方法で構築されます。.captionのみがY軸に沿って拡張されます。それ以外の場合、スタイルは以前のものと同様のままになります。

実質的に＃5.3 .captionも水平方向に展開しますが、中央からではなく、左端から展開します。 トランジションが発生するポイントを移動するには、transform-originを適用します。これは、見てのとおり、rotateと連動するだけではありません。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: scaleX(0); transform-origin: left center; transition: all 0.4s linear 0s; } 

したがって、トランジションが発生するポイントを水平方向に一番左の位置にシフトし、垂直方向にデフォルトの位置である中央に移動します。 他のスタイルは似たままです。

効果＃5.4は 、効果＃5.3 と似ています。ここでは、.captionは上から下へ、上端から展開します。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: scaleX(0); transform-origin: center top; transition: all 0.4s linear 0s; } 

ポイントは最も高い位置にシフトされますが、水平方向は中央のままです。 他のスタイルも同様です。

回転と変換元の束を他にどのように使用できますか。 効果＃6.1-＃6.3

例

効果＃6.1では 、マウスをホバーすると、キャプションが見えないカーネーションに固定されているかのように回転します。 「カーネーション」の役割は、指定された座標を持つtransform-originによって実行され、回転は回転によって提供されます。

<h4>、<p>、および<a>のスタイルと同様に、html構造は基本的なままです。 .captionのスタイルのみを変更します。 回転を追加することから始めましょう：

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(180deg); transition: all 0.4s cubic-bezier(0.4, 0, 1, 1) 0s; } 

.captionが逆さまになりました。 ホバーすると、元の位置に戻ります。

 .effect:hover .caption { transform: rotate(0deg); } 

これで、ホバーすると、.captionは軸を中心にスクロールするだけになります。 ただし、トランジションが発生する周囲のポイントの座標を変更し、この場合のように、この方法で垂直方向に上に移動すると、

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(180deg); transform-origin: center top; transition: all 0.4s cubic-bezier(0.4, 0, 1, 1) 0s; } 

次のようになります。.captionは、トップにしたかのように上に移動します。-100％。 回転の基準となる点がシフトしているためです。

ここで、「遷移点」の座標をシフトし、回転の方向を変更すると、この効果のさまざまなバリエーションを得ることができます。 したがって、たとえば、 効果＃6.2は以前のものとほぼ完全に類似しており、 transform-origin：center bottom; 元の値がそのような変換になったという事実により、回転の方向が逆になります。

効果＃6.3では、回転の方向は＃6.2と同じままで、「遷移点」はコンテナーの右側の中央に移動します。transform-origin：right center; それ以外の場合、スタイルは同じままです。

遅延について詳しく説明しましょう。 効果＃7.1-＃7.3

例

エフェクト分析の順序を少し変えて、エフェクト＃7.2から始めて、次に＃7.3に進み、その後で＃7.1に戻ります。

したがって、 効果＃7.2 ：マウスを上下にホバーすると、2つの.overlayコンテナーが移動し、閉じられると、.captionが上部から離れます。

html構造にはこれが必要です。

 <div class="effect"> <img src="img/ef7.jpg" alt="Effect #7" /> <div class="overlay overlay-top"></div> <div class="overlay overlay-bottom"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> 

ご覧のとおり、上下に移動する2つの.overlayレイヤーを追加しました。

スタイルに関して：<h4>、<p>および<a>スタイルはデフォルトのままです。

次に、.overlayコンテナのスタイルを見てみましょう。

 .effect .overlay { background: rgba(0,0,0,0.7); width: 100%; height: 50%; left: 0px; position: absolute; transition: all 0.15s linear 0s; } .effect .overlay-top { top: -100%; } .effect .overlay-bottom { top: 100%; } 

.overlay-topを上に、.overlay-bottomを-下に、それぞれホバリングするときに移動する必要があります。それぞれの高さは親の高さの50％に等しいため、これは簡単です。

 .effect:hover .overlay-top { top: 0px; } .effect:hover .overlay-bottom { top: 50%; } 

ここで、.captionのタイプと動作を定義します。これも上から下に向かっているため、最上部に配置する必要があります。ここで、.captionは.overlayの後に表示されるため、transitionプロパティに設定された遅延パラメーター値を持つことは論理的です。

 .effect .caption { position: absolute; top: -100%; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.2s linear 0.3s; } .effect:hover .caption { top: 0px; } 

仕組みを確認しましょう。手順の結果：

1. .effectにカーソルを合わせる
2. ドライブアウト。オーバーレイ
3. キャプションが表示されます
4. ホバーを削除
5. オーバーレイがその場所に戻る
6. .captionは、設定された遅延値のおかげで、0.3秒後の場所に戻りますが、これは計画ではまったくありませんでした

.captionに定義された遅延は機能することがわかりましたが、結果には影響しません。 ここで何ができますか？

要素自体のスタイルだけでなく、ホバー時の動作のスタイルにも遅延を設定できます。これがトリックです。ホバー上で要素はどのように振る舞うべきですか？最初に、.overlayが終了し、次に.captionのみが残ります。これは、.overlayのホバー状態では遅延が0sであり、.captionが-0.3sであることを意味します

 .effect:hover .caption { top: 0px; transition-delay: 0.3s; } .effect:hover .overlay { transition-delay: 0s; } 

ただし、ホバーを削除すると、要素は通常の動作に戻り、.captionは最初に遅延なしでその場所に戻り、次に.overlayに戻ります。したがって、最初の遅延をキャンセルし、2番目に追加する必要があります。

 .effect .caption { position: absolute; top: -100%; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.2s linear 0s; } .effect .overlay { background: rgba(0,0,0,0.7); width: 100%; height: 50%; left: 0px; position: absolute; transition: all 0.15s linear 0.3s; } 

これで順序が尊重され、要素が正しい順序で移動します。

効果＃7.3は以前のものとほとんど同じですが、唯一の違いは.overlayのスタイルです：

 .effect .overlay { background: rgba(0,0,0,0.7); width: 50%; height: 100%; position: absolute; transition: all 0.15s linear 0.4s; } .effect .overlay-top { left: 0; top: -100%; } .effect .overlay-bottom { right: 0; top: 100%; } .effect:hover .overlay { top: 0; transition-delay: 0s; } 

エフェクト＃7.1を使用すると、もう少し修正する必要があります。＃7.3と同様に、.overlayの位置とスタイルのみが＃7.2と異なり、右上と左下から2つの三角形で移動します。

しかし、もちろん、三角形ではなく、長方形も一緒に移動します。両方の.overlayに共通のスタイルは次のとおりです。

 .effect .overlay { background: rgba(0,0,0,0.7); width: 408px; height: 170px; position: absolute; transform: rotate(33deg); transition: all 0.15s linear 0.3s; } 

重要なことは次のとおりです。長方形の幅と高さは、エフェクトを使用してコンテナのサイズに合わせて個別に調整する必要があります。私たちがしていること：長方形を取り、33度ずつ回転し、上部をそれぞれ.effectコンテナーの右上隅に移動し、下部をそれぞれ左下に移動し、コンテナー.effectの対角線に触れるまでホバーに移動します：

 .effect .overlay-top { top: -158px; left: 142px; } .effect:hover .overlay-top { top: -50px; left: -1px; } .effect .overlay-bottom { top: 192px; left: -244px; } .effect:hover .overlay-bottom { top: 79px; left: -111px; } .effect:hover .overlay { transition-delay: 0s; } 

他のスタイルは、以前のエフェクトのスタイルと同じです。

取得したスキルを実際に適用します。その他のトリック！効果＃8.1-＃10.3

＃8.1-＃8.3

例

これらの効果のハイライトはバウンス効果です。これは、.overlayの遷移プロパティのtransition-timing-functionパラメーターの値に基づいています。

html構造は次のとおりです。

 <div class="effect"> <img src="img/ef8.jpg" alt="Effect #8" /> <div class="overlay"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> 

この場合、.overlayに必要なのは1つだけです。彼に必要なスタイルは次のとおりです。

 .effect .overlay { background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transform: scale(0); transition: all 0.4s cubic-bezier(0, 1.31, 1, -0.29) 0.4s; } 

さて、ホバーで、それを増やします：

 .effect:hover .overlay { transform: scale(1); transition-delay: 0s; } 

.captionが邪魔にならないように、透明性の変更のみを記述します。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.2s linear 0s; } .effect:hover .caption { opacity: 1; transition-delay: 0.6s; } 

他のスタイルはデフォルトのままです。

エフェクト＃8.2-＃8.3も同様に構築されます。唯一の違いは、＃8.2がscaleX（）を使用し、＃8.3がscaleY（）を使用することです。これについては、エフェクトの解析時に詳細に説明しました＃3.1-＃ 3.3

＃9.1-＃9.3

例

効果＃9.1は、2つの.overlayが中央から順番に表示され、.captionが小さなバウンス効果でそれらの後に残るという事実に基づいています。

html構造については、次のとおりです。

 <div class="effect"> <img src="img/ef9.jpg" alt="Effect #9" /> <div class="overlay overlay-1"></div> <div class="overlay overlay-2"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> 

<h4>、<p>、および<a>のスタイルは変更されません。.overlayのスタイルを検討してください。

 .effect .overlay { background: rgba(0,0,0,0.35); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transform: scale(0); } 

.overlay-1と.overlay-2は異なる時間に入力するため、それぞれに遷移を与えます-それぞれ：

 .effect .overlay-1 { transition: all 0.2s linear 0.3s; } .effect .overlay-2 { transition: all 0.2s linear 0.6s; } .effect:hover .overlay { transform: scale(1); } 

したがって、ホバーが削除されると、ホバーは互いに遅れて消えます。したがって、.overlay-1の場合はdelay：0sを、.overlay-2の場合-delay：0.2sを使用します（エフェクトを解析する際の要素の出現および消滅の順序に対する遅延の影響について詳しく記述しました＃7.1-＃7.3）

 .effect:hover .overlay-1 { transition-delay: 0s; } .effect:hover .overlay-2 { transition-delay: 0.2s; } 

スタイル.captionを考慮する必要があります：

 .effect .caption { position: absolute; top: 0px; left: 100%; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.4s cubic-bezier(0.05, -0.24, 0, 1.33) 0s; } .effect:hover .caption { left: 0px; transition-delay: 0.4s; } 

エフェクト＃9.2も同じ方法で作成されます。.overlayのみが丸く、.caplay（.overlayなど）が中央から表示されます。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.3s linear 0s; transform: scale(0); } .effect:hover .caption { transform: scale(1); transition-delay: 0.4s; } .effect .overlay { background: rgba(0,0,0,0.35); width: 2px; height: 2px; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: scale(0); } .effect .overlay-1 { transition: all 0.5s linear 0.3s; } .effect .overlay-2 { transition: all 0.5s linear 0.6s; } 

他のスタイルはエフェクト＃9.1のスタイルに似ていますが、

エフェクト＃9.3は次のように構成されています。次のHTML構造が必要です。

 <div class="effect”> <img src="img/ef9.jpg" alt="Effect #9" /> <div class="overlay"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> 

.overlayのこの外観を実現するために、ボックスシャドウを徐々に増やします。

 .effect .overlay { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; transition: all 0.3s linear 0.3s; } .effect:hover .overlay { box-shadow: inset 0px 0px 25px 100px rgba(0,0,0,0.7); } 

.captionの初期位置は次のとおりです。180度回転し、不透明度：0。ホバー上で.captionを展開します。これは、回転中に不透明になります。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; opacity: 0; transform: rotate(180deg); transition: all 0.3s linear 0s; } .effect:hover .caption { opacity: 1; transform: rotate(0deg); transition-delay: 0.5s; } 

他のすべてのスタイルはデフォルトです。

＃10.1-＃10.3

例

エフェクト＃10.1は、5つの「ラダー」サイズ変更.overlay要素と、あたかも出現する.captionで構成されています。

html構造にはこれが必要です。

 <div class="effect"> <img src="img/ef10.jpg" alt="Effect #10" /> <div class="overlay overlay-1"></div> <div class="overlay overlay-2"></div> <div class="overlay overlay-3"></div> <div class="overlay overlay-4"></div> <div class="overlay overlay-5"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> 

まず、「はしご」を作ります。各.overlayは、場所と遅延パラメーター値が他と異なります。

 .effect .overlay { background: rgba(0,0,0,0.7); width: 20%; height: 100%; position: absolute; top: 100%; } .effect .overlay-1 { left: 0; transition: all 0.15s linear 0.2s; } .effect .overlay-2 { left: 20%; transition: all 0.15s linear 0.25s; } .effect .overlay-3 { left: 40%; transition: all 0.15s linear 0.3s; } .effect .overlay-4 { left: 60%; transition: all 0.15s linear 0.35s; } .effect .overlay-5 { left: 80%; transition: all 0.15s linear 0.4s; } 

ホバーすると、遅延も異なります。

 .effect:hover .overlay { top: 0px; } .effect:hover .overlay-1 { transition-delay: 0s; } .effect:hover .overlay-2 { transition-delay: 0.1s; } .effect:hover .overlay-3 { transition-delay: 0.15s; } .effect:hover .overlay-4 { transition-delay: 0.2s; } .effect:hover .overlay-5 { transition-delay: 0.25s; } 

ここで最も興味深く、難しいのは.captionです。基本的なスタイルは次のとおりです。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.3s linear 0s; } 

次に、アニメーションを開始する前に位置を指定する必要があります。最初に展開します。マウスにカーソルを合わせると、.captionがどのように回転するかがわかります。また、transform-originを設定します。これは、変換が行われるポイントを定義します。変換を追加：回転（-50度）; およびtransform-origin：0％100％; 。次のステップは、少し後の「ダイビング」を提供するための垂直および水平変位です。transform：translate（x、y）を使用してシフトします。これは、それぞれX軸とY軸に沿って要素をシフトします。私たちのタスクは、.captionをほぼ水平方向の角度に、そして.effectsコンテナーの外側の約3分の2を垂直方向に移動することです。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transform: rotate(-50deg) translate(-101px,291px); transform-origin: 0% 100%; transition: all 0.3s linear 0s; } 

ここで、エフェクトが入ったコンテナ上にマウスを置くまで、.captionを完全に非表示にする必要があります。今回はheight：0pxを使用して非表示にします。およびオーバーフロー：非表示。 。 最終的なスタイルは次のとおりです。

 .effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 0px; overflow: hidden; color: #fff; transform: rotate(-50deg) translate(-101px,291px); transform-origin: 0% 100%; transition: all 0.3s linear 0s; } 

ここで、ホバーで.captionを明示するために、その高さを復元し、回転（0度）するために回転して、水平および垂直にその場所に戻します。

 effect:hover .caption { height: 100%; transform: rotate(0deg) translate(0px,0px); transition-delay: 0.3s; } 

<h4>、<p>、および<a>のスタイルはデフォルトのままです。

エフェクト＃10.2は2つの.overlayに基づいて構築され、左上と右下をそれぞれ残し、上にある<h4>、<p>および<a>要素の「フォールアウト」を残します。

html構造にはこれが必要です。

 <div class="effect"> <img src="img/ef10.jpg" alt="Effect #10" /> <div class="overlay overlay-1"></div> <div class="overlay overlay-2"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> 

半透明のバッキングで開く左上の.overlayから始めましょう。

 .effect .overlay-1 { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 0px; height: 0px; overflow: hidden; transition: all 0.3s linear 0.3s; } .effect:hover .overlay-1 { width: 100%; height: 100%; transition-delay: 0s; } 

右下でもっと面白い。境界線の幅は4pxなので、幅と高さを100％に設定するだけでは十分ではありません。8pxを垂直および水平に補正する必要があります。これは計算に役立ちます。

 effect .overlay-2 { position: absolute; bottom: 0px; right: 0px; background: transparent; border: 4px double #fff; width: 0px; height: 0px; opacity: 0; transition: all 0.3s linear 0.3s; } .effect:hover .overlay-2 { width: 100%; max-width: calc(100% - 8px); height: 100%; max-height: calc(100% - 8px); opacity: 1; transition-delay: 0s; } 

それでは、.captionとそのコンテンツに移りましょう。.captionの場合、スタイルはデフォルトのままで、移動された要素<h4>、<p>、および<a>に対して変更されます。これらはそれぞれ上に移動する必要があります。タイトルが下線で境界線と重ならないように、幅と.overlay-2を計算しましょう：

 .effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin: 20px auto 0px auto; width: calc(100% - 8px); position: relative; top: -100%; transition: all 0.3s linear 0.2s; } .effect .caption p { margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; position: relative; top: -100%; transition: all 0.3s linear 0.1s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: -100%;; transition: all 0.3s linear 0s; } 

ホバー上で要素が省略されていることだけが残り、確立した順序で：

 .effect:hover .caption a.btn, .effect:hover .caption p, .effect:hover .caption h4 { top: 0px; } .effect:hover .caption a.btn { transition-delay: 0.3s; } .effect:hover .caption p { transition-delay: 0.4s; } .effect:hover .caption h4 { transition-delay: 0.5s; } 

効果＃10.3は、拡大図と、.captionの回転角度の変更で構成されます。

html構造には、デフォルトと、<h4>、<p>、および<a>のスタイルが必要です。そして、画像を拡大することから始めます。

 .effect img { width: 100%; height: 100%; transition: all 0.25s linear 0.3s; transform: scale(1); } .effect:hover img { transform: scale(1.3); transition-delay: 0s; } 

.captionについては、タスクを30度拡大し、その右下隅を画像の右下隅と組み合わせて、透明度を下げることで非表示にします。そして彼の移行は、次の2つの部分で構成されています。

1. 不透明度は、非常に短い時間でマウスをポイントするとすぐに変化するはずです。不透明度0.1s線形0s
2. 変換には、ステップ1に必要な時間の遅延と、小さなスイングの錯覚を作成する遷移タイミング関数が必要です：変換0.35秒立方ベジェ（0.49、-0.19、0.7、-0.01）0.1秒

 .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transform: rotate(30deg) translate(30px,-89px); transition: transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s, opacity 0.1s linear 0s; } .effect:hover .caption { transform: rotate(0deg) translate(0px,0px); opacity: 1; transition-delay: 0.3s; } 

この記事がお役にたち、おもしろいことを願っています！