サイズが大きいため、記事は3つの部分に分かれています。 最初の部分 。 第三部。
デモ資料はこちらです。 すべてのプレフィックスはデモに添付されていますが、ここではそれらに焦点を合わせません。
警告：エフェクトは、CSS3機能をサポートする最新のブラウザーでのみ機能します。
効果＃12
例
これを行うことは不可能であるため、遷移を使用したデフォルト状態からのグラデーションが別のグラデーションにスムーズに遷移するため（この場合の遷移は単純に機能しません）、この効果のために、グラデーションを持つ2つのブロックをデフォルトのhtml構造に追加し、。アイコンも：
<div class="effect eff-12"> <img src="img/ef12.jpg" alt="Effect #12" /> <div class="overlay"> <div class="icon"></div> </div> <div class="gradient"></div> <div class="inner-gradient"></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>
最初のグラデーションを設定します。 エフェクト＃11の線形グラデーションの作成方法について詳しく説明しました。
.eff-12 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transition: all 0.25s linear 0.2s; }
ホバーに表示される2番目のグラデーション：
.eff-12 .inner-gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transition: all 0.25s linear 0.2s; }
ここで、.captionを非表示にします。これはホバリング時に左から右に移動する必要があります。
.eff-12 .caption { position: absolute; top: 0px; left: 100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
他の.caption要素にはデフォルトのスタイルがあります。
アイコン付きの.overlayブロックについては、効果＃10の説明で詳しく説明しています。
.eff-12 .overlay { width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); border-right: 50px solid rgba(255,255,255,0.6); position: absolute; right: 0; bottom: 0; transform-origin: right; transition: all 0.2s linear 0s; } .eff-12 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 5px; transition: all 0.01s linear 0.2s; }
次に、効果を収集します。
最初に最初のグラデーションがフェードします：
.eff-12:hover .gradient { opacity: 0; }
同時に、2番目のグラデーションを持つブロックを不透明にします。
.eff-12:hover .inner-gradient { opacity: 1; }
.overlayとアイコンを削除します。
.eff-12:hover .overlay { transform: scaleX(0); } .eff-12:hover .overlay .icon { opacity: 0; transition-delay: 0s; }
.captionの葉：
.eff-12:hover .caption { left: 0px; transition-delay: 0.35s; }
効果＃13
例
この効果のために、デフォルトのhtml構造はアイコン付きのブロックでのみ補完されます：
<div class="effect eff-13"> <img src="img/ef13.jpg" alt="Effect #13" /> <div class="overlay"> <div class="icon"></div> </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>
まず、画像のスタイルを変更します。 ホバリング時に写真を「切り離す」機会を得るには、まず「ズームイン」する必要があります。
.eff-13 img { min-width: 100%; min-height: 100%; transform: scale(1.3); transition: all 0.15s linear 0s; }
次に、アイコンと.overlayにスタイルを指定します。 アイコンに追加のトランジションを与えて、アニメーションが開始されてから0.1秒後に消えるようにし（ホバーに設定）、ホバーがキャンセルされるとすぐに戻るようにします。
.eff-13 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-13 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; opacity: 1; transition: all 0.01s linear 0s; }
.captionとその要素のスタイルを設定します。それぞれ異なるトランジションディレイ値で表示されるため、それぞれ独自のトランジションが必要です（ホバーで個別にディレイ値を指定します）。さらに、透明度の値を0に設定します。
.eff-13 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-13 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; opacity: 0; transition: all 0.2s linear 0s; } .eff-13 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-13 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; opacity: 0; transition: all 0.2s linear 0s; } .eff-13 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; opacity: 0; text-decoration: none; transition: all 0.2s linear 0s; }
効果を収集します。
画像を削除し、デフォルトのサイズに縮小します。
.eff-13:hover img { transform: scale(1); }
素材を中央に絞り、アイコンを非表示にします。
.eff-13:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-13:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; }
.caption要素を表示します：
.eff-13:hover .caption h4, .eff-13:hover .caption p, .eff-13:hover .caption a { opacity: 1; } .eff-13:hover .caption h4 { transition-delay: 0.5s; } .eff-13:hover .caption p { transition-delay: 0.4s; } .eff-13:hover .caption a { transition-delay: 0.3s; }
効果＃14
例
この効果のために、デフォルトのhtml構造をアイコン付きの半透明ブロックで補完します：
<div class="effect eff-14"> <img src="img/ef14.jpg" alt="Effect #14" /> <div class="overlay"> <div class="icon"></div> </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>
最初に、画像を様式化します。 このように移動できるように、比率に違反しないように、移動する幅と高さにそれぞれ追加ピクセルを追加します。 事前に、左から右に移動するために、移動と反対の方向に追加されたピクセル数だけ画像をシフトします。 変位しない場合、右から左への動きがあります。
.eff-14 img { min-width: 100%; min-height: 100%; height: calc(100% + 30px); width: calc(100% + 30px); transform: translate(-30px,0); transition: all 0.15s linear 0s; }
次に、アイコンを使用して半透明のブロックを設定します。そのため、エフェクト＃13の詳細についてはトランジションが必要です。
.eff-14 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-14 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; transition: all 0.01s linear 0s; }
.caption要素のスタイルを設定します。 今回は、遷移タイミング関数の値は、バウンス効果を作成するために通常よりも複雑になります。さらに、「落下」する必要がある高さまでシフトします。
.eff-14 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-14 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; top: -200px; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } .eff-14 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-14 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; position: relative; top: -250px; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } .eff-14 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; top: -300px; position: relative; text-decoration: none; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; }
効果を収集します。
写真を左から右に移動します。 右から左にシフトする必要がある場合は、最初のパラメーターに必要なピクセル数を指定し、上記のデフォルト値ではこのパラメーターに0pxを入力します。
.eff-14:hover img { transform: translate(0,0); }
次に、素材を減らします。
.eff-14:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-14:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; }
.caption要素を省略します。
.eff-14:hover .caption h4, .eff-14:hover .caption p, .eff-14:hover .caption a { top: 0px; } .eff-14:hover .caption h4 { transition-delay: 0.5s; } .eff-14:hover .caption p { transition-delay: 0.4s; } .eff-14:hover .caption a { transition-delay: 0.3s; }
効果＃15
例
この効果のために、デフォルトのhtml構造をアイコン付きの半透明ブロックで補完します：
<div class="effect eff-15"> <img src="img/ef15.jpg" alt="Effect #15" /> <div class="overlay"> <div class="icon"></div> </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>
写真を定型化します。 この効果では、左から右、上から下に移動し、増加します。 したがって、水平方向と垂直方向に移動するピクセル数だけ幅と高さを増やし（それ以外の場合、画像の比率は歪められます）、画像自体を左から上に同じピクセル数だけシフトして、そこから使用できるようにします上下に移動します（これを行わず、ホバーのピクセル数を示す場合は、写真を下から上、右から左に移動できます）。
.eff-15 img { min-width: 100%; min-height: 100%; height: calc(100% + 30px); width: calc(100% + 30px); transform: translate(-30px,-30px) scale(1); transition: all 0.15s linear 0s; }
次に、アイコンを使用して半透明のブロックを設定します。そのため、エフェクト＃13の詳細についてはトランジションが必要です。
.eff-15 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-15 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; transition: all 0.01s linear 0s; }
そして、.caption要素のスタイルを設定します。 transition-timing-functionの値を設定してバウンスエフェクトを作成し、さらに、エフェクトのあるブロックの外側で左に移動します。
.eff-15 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-15 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; left: 400px; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } .eff-15 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-15 .caption p { width: 100%; max-width: -webkit-calc(80% - 20px); max-width: -o-calc(80% - 20px); max-width: -moz-calc(80% - 20px); max-width: -ms-calc(80% - 20px); max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; position: relative; left: 400px; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } .eff-15 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; left: 400px; position: relative; text-decoration: none; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; }
効果を収集します。
私たちは絵を変えて増やします。 上下に移動する必要がある場合、変換パラメーターとデフォルト値のゼロ値の両方に必要なピクセル数を入れます。
.eff-15:hover img { transform: translate(0px,0px) scale(1.1); }
素材を減らす：
.eff-15:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-15:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; }
そして、.caption要素を所定の位置にプッシュします。
.eff-15:hover .caption h4, .eff-15:hover .caption p, .eff-15:hover .caption a { left: 0px; } .eff-15:hover .caption h4 { transition-delay: 0.3s; } .eff-15:hover .caption p { transition-delay: 0.35s; } .eff-15:hover .caption a { transition-delay: 0.4s; }
効果＃16
例
この効果のために、デフォルトのhtml構造を、サブストレートを持つブロックと三角形のセクターを持つブロックで補完します：
<div class="effect eff-16"> <img src="img/ef16.jpg" alt="Effect #16" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </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>
アイコンで背景を定型化します：
.eff-16 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-16 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; }
.triangle-setのスタイル：
.eff-16 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
次に、三角形に直接移動します。 正三角形を作成するには、ブロックを取得し、幅と高さ-0pxに設定し、三角形の高さと同じ幅の透明な境界線に設定し、4つの方向のいずれかで同じ幅の色付きの境界線を設定して三角形を形成する必要があります右側。
すべてのエフェクトの三角形に共通のスタイルを次に示します。 これまでのところ、ここでは透明な境界線のみが設定されています。
.eff-16 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; opacity: 0; transition: all 0.2s linear 0s; }
次に、各三角形のスタイルを追加します。 「下向き」の三角形の場合、色を上に設定します。
.eff-16 .triangle-1 { border-top: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; }
右、上、左への「ダイレクト」の場合、方向に応じて境界線も設定します。
.eff-16 .triangle-2 { border-right: 150px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-16 .triangle-3 { border-bottom: 150px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-16 .triangle-4 { border-left: 150px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; }
効果を使用して、ブロックの左端の後ろに.captionを非表示にします。
.eff-16 .caption { position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
.caption要素のスタイルはデフォルトのままです。
効果を収集します。
最初の.overlayが消えます：
.eff-16:hover .overlay { right: -45px; } .eff-16:hover .overlay .icon { opacity: 0; }
次に、三角形が1つずつ表示され始めます。
.eff-16:hover .triangle { opacity: 1; } .eff-16:hover .triangle-1 { transition-delay: 0.2s; } .eff-16:hover .triangle-2 { transition-delay: 0.55s; } .eff-16:hover .triangle-3 { transition-delay: 0.4s; } .eff-16:hover .triangle-4 { transition-delay: 0.35s; }
そして最後に.captionの葉：
.eff-16:hover .caption { left: 0px; transition-delay: 0.6s; }
効果＃17
例
この効果のために、デフォルトのhtml構造を、サブストレートを持つブロックと三角形のセクターを持つブロックで補完します：
<div class="effect eff-17"> <img src="img/ef17.jpg" alt="Effect #17" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </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とアイコンを定型化します：
.eff-17 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-17 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; }
.triangle-setのスタイル：
.eff-17 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
正三角形がどのように正確に作成されるかについては、効果＃16で詳しく説明しました。 この場合、各三角形も90度回転します。
.eff-17 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; opacity: 0; transform: rotate(-90deg); transition: all 0.2s linear 0s; }
そして、各三角形のスタイル：
.eff-17 .triangle-1 { border-top: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } .eff-17 .triangle-2 { border-right: 150px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-17 .triangle-3 { border-bottom: 150px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-17 .triangle-4 { border-left: 150px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; }
.captionを非表示にします：
.eff-17 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; }
.caption要素にはデフォルトのスタイルがあります。
効果を収集します。
まず、.overlayを削除します。
.eff-17:hover .overlay { right: -45px; } .eff-17:hover .overlay .icon { opacity: 0; }
三角形を表示して展開します。
.eff-17:hover .triangle { opacity: 1; transform: rotate(0deg); } .eff-17:hover .triangle-1 { transition-delay: 0.2s; } .eff-17:hover .triangle-2 { transition-delay: 0.35s; } .eff-17:hover .triangle-3 { transition-delay: 0.4s; } .eff-17:hover .triangle-4 { transition-delay: 0.55s; }
.captionが表示されます。
.eff-17:hover .caption { opacity: 1; transition-delay: 0.6s; }
効果＃18
例
この効果のために、デフォルトのhtml構造を、サブストレートを持つブロックと三角形のセクターを持つブロックで補完します：
<div class="effect eff-18"> <img src="img/ef18.jpg" alt="Effect #18" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </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>
背景とアイコンを定型化する：
.eff-18 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-18 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; }
三角形を追加します。 三角形の作成方法の詳細については、＃16を有効にするために書きました。 .triangle-setの最初のスタイル：
.eff-18 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
次に、私たちの仕事は三角形を減らすことです。 ここではスケールは役に立ちません。ブロックの幅と高さはすべて同じで0pxなので、境界線の幅を変更してサイズを縮小します。
.eff-18 .triangle { position: absolute; width: 0px; height: 0px; opacity: 0; border: 5px solid transparent; transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; }
そして、効果でブロックの端の後ろに、.captionを非表示にします。
.eff-18 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
.caption要素の場合、スタイルはデフォルトのままです。
効果を収集します。
.overlayを削除します。
.eff-18:hover .overlay { right: -45px; } .eff-18:hover .overlay .icon { opacity: 0; }
三角形の透明度とサイズを変更します。
.eff-18:hover .triangle { opacity: 1; border-width: 150px; }
そして.captionを押し上げます：
.eff-18:hover .caption { top: 0px; transition-delay: 0.35s }
効果＃19
例
前の3つの効果については、デフォルトのhtml構造を、アイコン付きの半透明ブロックと三角形付きのブロックで補完します。
<div class="effect eff-19"> <img src="img/ef19.jpg" alt="Effect #19" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </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>
まず、六角形のスタイルを設定します。 六角形を作成するには、3つの部分に分解する必要があります。中央の長方形と、上下の2つの三角形です。 効果＃16で単純な正三角形を作成する方法についてはすでに説明しましたが、この場合はもう少し複雑なバージョンが必要です。 二等辺三角形を作成するには、1つのサイズの透明な境界線と別のサイズの可視の境界線を指定します（思い出すように、可視の境界線は三角形の高さを調整します）
.eff-19 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-19 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-19 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; }
そしてアイコン：
.eff-19 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; }
この知識を適用して、ホバーに表示される4つの三角形を作成します。
.triangle-setのスタイル：
.eff-19 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
三角形のスタイル。 表示される.borderは0pxになりました。これについては、実質的に＃18で詳しく説明しました。
.eff-19 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; transition: all 0.3s linear 0s; } .eff-19 .triangle-1 { border-top: 0px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } .eff-19 .triangle-2 { border-right: 0px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-19 .triangle-3 { border-bottom: 0px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-19 .triangle-4 { border-left: 0px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; }
キャプションの非表示：
.eff-19 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; }
他の.caption要素については、スタイルはデフォルトのままです。
効果を収集します。
.overlayを非表示にすると、スピンして透明になります。 あまりにも多くスクロールして、回転が速すぎたり遅すぎたりしないようにします。
.eff-19:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-19:hover .overlay .icon { opacity: 0; }
三角形が表示されます：
.eff-19:hover .triangle { opacity: 1; transition-delay: 0.2s; } .eff-19:hover .triangle-1 { border-top: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-2 { border-right: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-3 { border-bottom: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-4 { border-left: 30px solid rgba(255,255,255,0.7); }
.caption：
.eff-19:hover .caption { opacity: 1; transition-delay: 0.3s; }
効果＃20
例
このエフェクトを作成するために、デフォルトのhtml構造をアイコン付きの六角形ブロックと、エフェクトの右下と左上隅に表示される2つの要素を持つブロックで補完します。
<div class="effect eff-20"> <img src="img/ef20.jpeg" alt="Effect #20" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> </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。 効果＃19で六角形を作成することについて詳しく説明しました。
.eff-20 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-20 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-20 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } .eff-20 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; }
.triangle-setのスタイル：
.eff-20 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
次に、コーナーブロックについて説明します。 覚えているように、三角形を作成するには、幅と高さが0pxのブロックを作成し、三角形の方向を決定するものを除くすべての境界線を透明にします。 このようなブロックを作成するには、1つではなく2つの境界線を不透明にする必要があります。 左上の要素の場合-左および上の境界、右下の要素の場合-それぞれ下および右。 さらに、各ブロックを効果のあるブロックの外側に100％左右に移動します：
.eff-20 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; transition: all 0.3s linear 0s; } .eff-20 .triangle-1 { border-top: 40px solid rgba(255,255,255,0.6); border-left: 40px solid rgba(255,255,255,0.6); top: 0px; left: -100%; } .eff-20 .triangle-2 { border-right: 40px solid rgba(255,255,255,0.6); border-bottom: 40px solid rgba(255,255,255,0.6); bottom: 0px; right: -100%; }
.captionの場合、より複雑な移行タイミング関数を指定することが重要です。これにより、.captionは、下から移動するときに弾力的にジャンプします。
.eff-20 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; }
.caption要素のスタイルはデフォルトのままです。
効果を収集します。
最適な度数の選択に関する詳細については、.overlayをツイストします。
.eff-20:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-20:hover .overlay .icon { opacity: 0; }
ブロックを隅に押し込みます。
.eff-20:hover .triangle { transition-delay: 0.2s; } .eff-20:hover .triangle-1 { left: 0px; } .eff-20:hover .triangle-2 { right: 0px; }
そして、以下の.captionをプッシュします。
.eff-20:hover .caption { top: 0px; transition-delay: 0.5s; }
効果＃21
例
この効果を作成するには、デフォルトのhtml構造に加えて、素材とアイコンを含むブロックと、ホバーしたときに表示される半透明の要素を含むブロックが必要です。
<div class="effect eff-21"> <img src="img/ef21.jpg" alt="Effect #21" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle"></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。 効果＃19で六角形を作成することについて詳しく説明しました。
.eff-21 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-21 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-21 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } .eff-21 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; }
スタイリング.triangle。効果＃18で説明した三角形とは異なり、1つの境界線のみを表示する必要があります。これは、効果＃20のコーナー要素とは異なり、2つの可視境界線上に構築されます。border-leftの値を使用して、左端の三角形のノッチのサイズを制御できます。現在、border-left値の設定が大きすぎるため、ノッチはありません。
.eff-21 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; border-top: 150px solid rgba(255,255,255,0.6); border-left: 500px solid rgba(255,255,255,0.6); border-bottom: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; opacity: 0; transition: all 0.3s linear 0s; }
画面の左端の後ろに.captionを非表示にし、より複雑な遷移タイミング関数を設定します。
.eff-21 .caption { position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; }
内部の.caption要素はデフォルトのスタイルのままです。
次に、効果を収集します。
最適な度数の選択に関する詳細については、.overlayをツイストします。
.eff-21:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-21:hover .overlay .icon { opacity: 0; }
.triangleを不透明にし、三角形のノッチを形成して、.border-leftプロパティを変更します。
.eff-21:hover .triangle { opacity: 1; border-left: 100px solid rgba(255,255,255,0.6); }
そして、キャプション：
.eff-21:hover .caption { left: 0px; transition-delay: 0.3s; }