サイズが大きいため、記事は3つの部分に分かれています。 最初の部分 。 第二部
デモ資料はこちらです。 すべてのプレフィックスはデモに添付されていますが、ここではそれらに焦点を合わせません。
警告：エフェクトは、CSS3機能をサポートする最新のブラウザーでのみ機能します。
効果＃22
例
この効果を作成するには、画像を含む2つのブロックとアイコンを含む1つのブロックで基本的なhtml構造を補完する必要があります。
<div class="effect eff-22"> <div class="img-block img-block-left"> <img src="img/ef22.jpg" alt="Effect #22" /> </div> <div class="img-block img-block-right"> <img src="img/ef22.jpg" alt="Effect #22" /> </div> <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>
この効果では、画像が2つの部分に分割されるように、効果のあるブロックの幅の半分の2つのブロックを作成し、それぞれに同じ画像を配置します。 両方のブロックに共通のスタイルは次のとおりです。
.eff-22 .img-block { height: 100%; width: 50%; overflow: hidden; position: absolute; z-index: 5; transition: all 0.3s linear 0s; }
この方法でブロックが異なる方向に発散するためには、アニメーションが発生する基準となるブロックを設定する必要があります。 各ブロックのスタイルを個別に示します。
.eff-22 .img-block-left { top: 0px; left: 0px; transform-origin: right bottom; } .eff-22 .img-block-right { top: 0px; right: 0px; transform-origin: left bottom; }
これで、左右のブロックに同じ画像が表示されたので、右側のブロックで画像を左に50％シフトします。
.eff-22 .img-block-right img { transform: translate(-50%, 0); }
ここで、.captionのスタイルを設定します。 ブロックを透明にして、画像の読み込み中に.captionが表示されないようにします。
.eff-22 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.3s; }
内部の.caption要素はデフォルトのスタイルを保持します。
そして、.overlayを定型化します：実質的に二等辺三角形を作成することについて詳しく説明しました＃19。
.eff-22 .overlay { position: absolute; width: 0px; height: 0px; bottom: 0px; left: 0px; z-index: 10; border: 150px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); transition: all 0.2s linear 0.2s; } .eff-22 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 17px; left: -18px; }
効果を収集します。
.overlayの圧縮：
.eff-22:hover .overlay { border-bottom: 0px solid rgba(255,255,255,0.6); transition-delay: 0s; } .eff-22:hover .overlay .icon { opacity: 0; }
「減衰する」画像を定型化します。
.eff-22:hover .img-block-left { transform: rotate(-90deg); } .eff-22:hover .img-block-right { transform: rotate(90deg); } .eff-22:hover .img-block { transition-delay: 0.2s; }
透明度.captionを削除します。
.eff-22:hover .caption { opacity: 1; transition-delay: 0s; }
効果＃23
例
この効果を作成するには、画像を含む2つのブロックとアイコンを含む1つのブロックで基本的なhtml構造を補完する必要があります。
<div class="effect eff-23"> <div class="img-block img-block-top"> <img src="img/ef23.jpg" alt="Effect #23" /> </div> <div class="img-block img-block-bottom"> <img src="img/ef23.jpg" alt="Effect #23" /> </div> <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>
画像を2つの部分で開くために、効果＃22のように、それぞれが効果でブロックの高さの半分を占める2つのブロックを作成し、これらの各ブロックに同じ画像を配置します。 両方のブロックの共通スタイル：
.eff-23 .img-block { height: 50%; width: 100%; overflow: hidden; position: absolute; z-index: 5; transition: all 0.3s linear 0s; }
ブロックが効果のあるブロックの上部および下部の境界に対して「収縮」するためには、それぞれにtransform-originを設定する必要があります。
.eff-23 .img-block-top { top: 0px; left: 0px; transform-origin: top; } .eff-23 .img-block-bottom { bottom: 0px; left: 0px; transform-origin: bottom; }
これで、上部ブロックと下部ブロックの両方に画像の同じ部分が表示されるので、下部ブロックの画像を50％上に移動して、下部が見えるようにします。
.eff-23 .img-block-bottom img { transform: translate(0, -50%); }
次に、.captionのスタイルを設定します。 ブロックを透明にして、画像の読み込み中に.captionが表示されないようにします。
.eff-23 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.3s; }
内部の.caption要素はデフォルトのスタイルを保持します。
.overlayのスタイリング：効果的な二等辺三角形の作成について詳しく説明しました＃19。
.eff-23 .overlay { position: absolute; width: 0px; height: 0px; bottom: 0px; left: 0px; z-index: 10; border: 150px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); transition: all 0.2s linear 0.1s; } .eff-23 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 17px; left: -18px; }
効果を収集します。
写真付きのブロックを効果付きのブロックの端に圧縮します。
.eff-23:hover .img-block { transform: scaleY(0); transition-delay: 0.2s; }
.overlayを削除します。
.eff-23:hover .overlay { border-bottom: 0px solid rgba(255,255,255,0.6); transition-delay: 0s; } .eff-23:hover .overlay .icon { opacity: 0; }
.captionの不透明度を返します。
.eff-23:hover .caption { opacity: 1; transition-delay: 0s; }
効果＃24
例
この効果を作成するには、デフォルトのhtml構造を、内部に画像が含まれる4つのブロックとアイコンが付いたブロックで補完する必要があります。
<div class="effect eff-24"> <div class="img-block img-block-1"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="img-block img-block-2"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="img-block img-block-3"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="img-block img-block-4"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <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>
上昇する「カーテン」のような効果を作成するには、4つのブロックを取り、それらに同じ絵を配置する必要があります。 各ブロックの高さは、効果のあるブロックの高さの1/4です。
.eff-24 .img-block { width: 100%; height: 25%; position: absolute; overflow: hidden; left: 0px; }
各ブロックは前のブロックより25％低く、次の各ブロックの画像は前のブロックの画像の位置に対して25％上昇します（ブロックと写真のそのような編成の詳細については、効果＃7-9の説明を参照してください）。 ホバーすると、4番目のブロックが上がり、3番目の下に隠れます。そして、両方がさらに高くなり、2番目の下に隠れます。そして、最初の3つすべての下に、最初のz-indexが最大で、4番目が最小になります。 4つのブロックすべてとその画像のスタイルは次のとおりです。
.eff-24 .img-block-1 { top: 0px; z-index: 5; transition: all 0.15s linear 0s; } .eff-24 .img-block-2 { top: 25%; z-index: 4; transition: all 0.3s linear 0s; } .eff-24 .img-block-2 img { transform: translateY(-25%); } .eff-24 .img-block-3 { top: 50%; z-index: 3; transition: all 0.45s linear 0s; } .eff-24 .img-block-3 img { transform: translateY(-50%); } .eff-24 .img-block-4 { top: 75%; z-index: 2; transition: all 0.6s linear 0s; } .eff-24 .img-block-4 img { transform: translateY(-75%); }
ここで、.captionのスタイルを設定します。 ブロックを透明にして、画像の読み込み中に.captionが表示されないようにします。
.eff-24 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.6s; }
内部の.caption要素はデフォルトのスタイルを保持します。
スタイリング.overlay。 実質的に二等辺三角形の作成について詳しく説明しました＃19。
.eff-24 .overlay { position: absolute; width: 0px; height: 0px; bottom: 0px; left: 0px; z-index: 10; border: 150px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); transition: all 0.2s linear 0.5s; } .eff-24 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 17px; left: -18px; }
効果を収集します。
タスクは、画像のあるすべてのブロックを削除して、効果のあるブロックの外側の最初のブロックも非表示にすることです。 したがって、これらをすべてブロックの上端より25％上に上げて効果を上げます。
.eff-24:hover .img-block { top: -25%; }
「シャッター」効果は、アニメーションに割り当てられた時間（上で指定した）と立ち上がりの遅延を組み合わせることで実現されます。
.eff-24:hover .img-block-3 { transition-delay: 0.15s; } .eff-24:hover .img-block-2 { transition-delay: 0.3s; } .eff-24:hover .img-block-1 { transition-delay: 0.45s; }
.overlayを削除します。
.eff-24:hover .overlay { border-bottom: 0px solid rgba(255,255,255,0.6); transition-delay: 0s; } .eff-24:hover .overlay .icon { opacity: 0; }
.captionを不透明にする：
.eff-24:hover .caption { opacity: 1; transition-delay: 0s; }
効果＃25
例
この効果を作成するために、デフォルトのhtml構造には、アイコン付きのブロックと、順番に表示される3つのブロックが含まれています。
<div class="effect eff-25"> <img src="img/ef25.jpg" alt="Effect #25" /> <div class="overlay"> <div class="icon"></div> </div> <div class="flash flash-1"></div> <div class="flash flash-2"></div> <div class="flash flash-3"></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>
.flashブロックのスタイルから始めましょう。 それらは3つあり、それぞれの効果でブロックの高さの3分の1を占めます。
.eff-25 .flash { position: absolute; width: 100%; height: 100px; opacity: 0; left: 0px; background: rgba(255,255,255,0.4); } .eff-25 .flash-1 { top: 0px; } .eff-25 .flash-2 { top: 100px; } .eff-25 .flash-3 { top: 200px; }
ここで、.overlayのスタイルを設定します。これは最初に幅を変更し、引き伸ばされているように見えます。次に、エフェクトを使用してブロックの外側に左に移動するため、ブロックに対する位置が変わります。
.eff-25 .overlay { position: absolute; width: 140px; height: 40px; top: 130px; left: 0px; background: rgba(255,255,255,0.6); transition: width 0.2s linear 0s, left 0.15s linear 0.2s; } .eff-25 .overlay:after { content: " "; display: block; position: absolute; width: 0px; top: 0; left: 100%; border: 20px solid transparent; border-left: 20px solid rgba(255,255,255,0.6); } .eff-25 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 83%; z-index: 10; }
エフェクトでブロックの下端にある.captionを非表示にし、より複雑なtransition-timing-functionを与えます：
.eff-25 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.3s cubic-bezier(0.16, 0.32, 0, 0.86) 0s; }
.caption要素のスタイルはデフォルトのままです。
ここでのタスクは、ホバーすると最初の.flashが表示されてから消え、それから次の.flashが表示されることを確認することです。 これを行うには、animationプロパティとそれに付随する@keyframesを使用する必要があります。 @keyframesから始めましょう。将来のアニメーションの名前と、アニメーション化された要素がその動きで渡すキーポイントを設定する必要があります。 .Flashには3つの重要なポイントがあります。
- 透明なイニシャル
- それが現れる平均
- 再び透明になる究極の
したがって、@ keyframesを次のように設定できます。ここで、flashはアニメーションの名前です。
@keyframes flash { from {opacity: 0;} 50% {opacity: 1;} to {opacity: 0;} }
次に、効果を収集します。
ホバー時に、アニメーションを実行する必要があります。 これを行うには、animationプロパティを使用します。 ここでは、3つのパラメーターを使用します。名前、各フラッシュのすべてのキーポイントを通過するのに必要な時間、transition-timing-functionと同様のanimation-timing-functionです。
.eff-25:hover .flash { animation: flash 0.3s linear; }
今、何が起こったのかを見ると、すべての.flashが同時に点滅して消えることが明らかになるので、別のアニメーションパラメーターを使用する必要があります。これは遷移の遅延と同様に機能します。
.eff-25:hover .flash-1 { animation-delay: 0.45s; } .eff-25:hover .flash-2 { animation-delay: 0.55s; } .eff-25:hover .flash-3 { animation-delay: 0.65s; }
「ストレッチ」と.overlayの消失を追加します。
.eff-25:hover .overlay { width: 170px; left: -190px; }
.captionを上げます：
.eff-25:hover .caption { top: 0px; transition-delay: 0.8s; }
効果＃26
例
この効果を作成するには、アイコンが付いたブロックとブロックストリップをデフォルトの構造に追加する必要があります。これはホバーすると表示されます。
<div class="effect eff-26"> <img src="img/ef26.jpg" alt="Effect #26" /> <div class="overlay"> <div class="icon"></div> </div> <div class="flash"></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-26 .flash { position: absolute; left: -200px; top: -200px; background-color: rgba(255,255,255,0.6); width: 590px; height: 100px; transform: rotate(-25deg); }
@keyframesを設定して、アニメーションのキーポイントを決定します（これについては、効果＃25で記述されています）。
@keyframes flash-movement { from {top: -200px;} to {top: 400px;} }
.overlayのスタイルを設定します。これは、効果＃25でも詳しく説明されています。
.eff-26 .overlay { position: absolute; width: 140px; height: 40px; top: 130px; left: 0px; background: rgba(255,255,255,0.6); transition: width 0.2s linear 0s, left 0.15s linear 0.2s; } .eff-26 .overlay:after { content: " "; display: block; position: absolute; width: 0px; top: 0; left: 100%; border: 20px solid transparent; border-left: 20px solid rgba(255,255,255,0.6); } .eff-26 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 83%; z-index: 10; }
.captionの透明度を設定します。
.eff-26 .caption { position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; }
内部の.caption要素はデフォルトのスタイルのままです。
効果を収集します。
ブロックのアニメーションをストリップで開始します。 ご覧のとおり、ここでは以前のエフェクトよりも多くのアニメーションプロパティパラメータが使用されています。 アニメーションの名前、時間、およびアニメーションタイミング機能に加えて、次のものも使用されます。
- 繰り返し回数-アニメーションを何回再生しますか。 この場合、2回：上から下へ、下から上へ。
- animation-direction-要素がキーポイントを直接の順序（from to to）で渡すか、逆の順序（from to to from）で渡すかを示します。 代替値とは、奇数の損失ごとにアニメーションが直接の順序で、偶数ごとに-逆の順序で行われることを意味します。そのため、ストリップが最初に上から下に移動し、2回目に下から上に移動します。
.eff-26:hover .flash { animation: flash-movement 0.4s linear 0.45s 2 alternate; }
.overlayを削除します。
.eff-26:hover .overlay { width: 170px; left: -190px; }
透明度.captionを変更します。
.eff-26:hover .caption { opacity: 1; transition-delay: 0.8s; }
効果＃27
例
この効果を使用するには、デフォルトのhtml構造にアイコン付きのブロックと円付きのブロックを追加する必要があります。
<div class="effect eff-27"> <img src="img/ef27.jpg" alt="Effect #27" /> <div class="overlay"> <div class="icon"></div> </div> <div class="circle"> <div class="half-circle half-circle-left"></div> <div class="half-circle half-circle-right"></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-27 .circle { width: 100px; height: 100px; position: absolute; top: 100px; left: 100px; opacity: 0; }
円をホバーすると、2つの半分に分割されます。これを行うために、2つの半円形のブロックから組み立てます。次に、それらを互いに離します。
.eff-27 .circle .half-circle { background: rgba(255,255,255,0.6); width: 50px; height: 100px; position: absolute; } .eff-27 .circle .half-circle-left { top: 0px; left: 0px; border-radius: 100px 0px 0px 100px; } .eff-27 .circle .half-circle-right { top: 0px; right: 0px; border-radius: 0px 100px 100px 0px; }
次に、半円形ブロックごとに@keyframesを作成します。 効果＃25で@keyframesについて詳しく書きました。 ご覧のとおり、各半円は3つの重要なポイントを通過します。
- 半円はデフォルトの場所にあり、円の一部です
- 遠ざかり、サイズが小さくなり、完全な円になります
- 効果でブロックの外を飛ぶ
@keyframes half-circle-left { from { top: 0px; left: 0px; border-radius: 100px 0px 0px 100px; } 20% { top: 25px; left: -15px; height: 50px; border-radius: 100px; } to { top: 0px; left: -500px; height: 50px; border-radius: 100px; } } @keyframes half-circle-right { from { top: 0px; right: 0px; border-radius: 0px 100px 100px 0px; } 20% { top: 25px; right: -15px; height: 50px; border-radius: 100px; } to { top: 0px; right: -500px; height: 50px; border-radius: 100px; } }
.overlayのスタイルを設定します。これは、効果＃25でも詳しく説明されています。
.eff-27 .overlay { position: absolute; width: 140px; height: 40px; top: 130px; left: 0px; background: rgba(255,255,255,0.6); transition: width 0.2s linear 0s, left 0.15s linear 0.2s; } .eff-27 .overlay:after { content: " "; display: block; position: absolute; width: 0px; top: 0; left: 100%; border: 20px solid transparent; border-left: 20px solid rgba(255,255,255,0.6); } .eff-27 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 83%; z-index: 10; }
.captionを置く
.eff-27 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
残りの.caption要素はデフォルトのスタイルのままです。
効果を収集します。
最初に、円でブロックの透明度を変更します。
.eff-27:hover .circle { opacity: 1; transition-delay: 0.4s; }
次に、各半円のアニメーションを呼び出します。 エフェクト＃25-26で説明したパラメーターに加えて、ここで新しいパラメーターを使用します：animation-fill-mode。 この設定により、アニメーションが終了または停止したときにアニメーション要素に適用されるスタイルが決まります。 デフォルトでは、アニメーションの後、要素は最初のキーポイント@keyframesで指定された位置に戻ります。これはまったく必要ありません。そうしないと、.captionの直後に白い円が再び表示されます。 forwards値は、最後のキーポイント@keyframesで指定された位置に要素が残るように、つまり、効果のあるブロックの外側に必要です。
.eff-27:hover .half-circle-left { animation: half-circle-left 1s linear 0.55s forwards; } .eff-27:hover .half-circle-right { animation: half-circle-right 1s linear 0.55s forwards; }
ここで.overlayを削除します。
.eff-27:hover .overlay { width: 170px; left: -190px; }
そして.captionを押し上げます：
.eff-27:hover .caption { top: 0px; transition-delay: 1s; }
効果＃28
例
この効果を利用するには、デフォルトのhtml構造をアイコン付きのブロックと半円形のノッチ付きのブロックで補完する必要があります。これはホバーすると表示されます：
<div class="effect eff-28"> <img src="img/ef28.jpg" alt="Effect #28" /> <div class="overlay"> <div class="icon"></div> </div> <div class="circle"></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ピクセルの境界線を持つ大きな円であり、その一部のみが効果を持つブロック内にあるように配置されます。 円の左側の効果でブロックのスペース全体で背景を塗りつぶすには、大きな半透明の影を与えます。
.eff-28 .circle { width: 600px; height: 600px; border: 3px solid rgba(255,255,255,0.6); -webkit-border-radius: 300px; border-radius: 300px; position: absolute; bottom: -50px; left: 50px; box-shadow: 0px 0px 235px 1000px rgba(255,255,255,0.5); opacity: 0; transition: width 0.4s linear 0s, height 0.4s linear 0s, opacity 0.15s linear 0s; }
ここで、.captionサイズをゼロに減らします。
.eff-28 .caption { position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transform: scale(0); transition: all 0.2s linear 0s; }
他の.caption要素はデフォルトのスタイルのままです。
アイコンでブロックを様式化するためだけに残ります。 彼の基本的なスタイルは次のとおりです。
.eff-28 .overlay { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; border-radius: 500px; background: rgba(255,255,255,0.6); } .eff-28 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 39px; left: 33px; }
タスクは彼のために「バウンス」アニメーションを処方することであり、このためにはこの@keyframesが必要です（@keyframesの詳細については、効果＃25にあります）。 要素は5つの重要なポイントを通過します。
- 開始位置
- エフェクトでブロックの下端を叩く
- 元の位置に戻ります
- エフェクトでブロックの上端を叩く
- 高速化、効果的にブロックの端を飛びます
@keyframes bounce { from {top: 100px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 0px;} to {top: -200px;} }
効果を収集します。
最初に、アイコンを使用してブロックにアニメーションを適用します。 アニメーションについては、エフェクト＃25で詳しく説明し、アニメーション-フィルモードパラメータはエフェクト＃27で説明しました。
.eff-28:hover .overlay { animation: bounce 0.5s linear forwards; }
次に、埋め込み要素の透明度、幅、高さを変更して、このブロックの動きの錯覚を作成します。
.eff-28:hover .circle { opacity: 1; width: 400px; height: 400px; transition-delay: 0.35s; }
最後に、.captionをインクリメントします。
.eff-28:hover .caption { transform: scale(1); transition-delay: 0.9s; }
効果＃29
例
この効果を得るには、デフォルトのhtml構造に、ホバーしたときに表示されるアイコンと四角いブロックが付いたブロックを追加する必要があります。
<div class="effect eff-29"> <img src="img/ef29.jpg" alt="Effect #29" /> <div class="overlay"> <div class="icon"></div> </div> <div class="square"></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-29 .square { width: 84%; height: 84%; position: absolute; top: 7%; left: 7%; border: 3px solid rgba(255,255,255,0.6); border-radius: 10px; transform: scale(0); opacity: 0; }
.captionを効果のあるブロックの外側に移動します。
.eff-29 .caption { position: absolute; top: -100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
内部の.caption要素はデフォルトのスタイルを保持します。
これらのスタイルを詳細に調べたエフェクト＃28の同じブロックとまったく同じ方法で、アイコンでブロックをスタイル設定します。ここでは、スタイル自体と@keyframeのみを示します。
.eff-29 .overlay { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; border-radius: 500px; background: rgba(255,255,255,0.6); } .eff-29 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 39px; left: 33px; } @keyframes bounce { from {top: 100px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 0px;} to {top: -200px;} }
効果を収集します。
最初に、正方形ブロックのスタイルを追加します。 サイズを大きくし、不透明にし、影を追加して、正方形の境界の外側にある背景の錯覚を作成します。 ホバーにのみトランジションを追加する理由-ホバーをキャンセルすると、正方形がすぐに消えるからです。
.eff-29:hover .square { transform: scale(1); opacity: 1; box-shadow: 0px 0px 200px 60px rgba(255,255,255,0.4); transition: transform 0.3s linear 0.3s, opacity 0.2s linear 0.3s, box-shadow 0.2s linear 0.7s; }
アイコン付きのブロックアニメーションを追加します。アニメーションは効果＃25で詳細に説明され、アニメーションフィルモードモードパラメーターは効果＃27で説明されています。
.eff-29:hover .overlay { animation: bounce 0.5s linear forwards; }
.captionを省略します。
.eff-29:hover .caption { top: 0px; transition-delay: 0.8s; }
効果＃30
例
この効果を作成するには、デフォルトのhtml構造をアイコン付きのブロックとバブル付きのブロックで補完する必要があります。このブロックでは、エフェクトで見たい数のバブルブロックを作成する必要があります。
<div class="effect eff-30"> <img src="img/ef30.jpg" alt="Effect #30" /> <div class="overlay"> <div class="icon"></div> </div> <div class="bubbles"> <div class="bubble"></div> <div class="bubble bubble-2"></div> <div class="bubble bubble-3"></div> <div class="bubble bubble-4"></div> <div class="bubble bubble-5"></div> <div class="bubble bubble-6"></div> <div class="bubble bubble-7"></div> <div class="bubble bubble-8"></div> <div class="bubble bubble-9"></div> <div class="bubble bubble-10"></div> <div class="bubble bubble-11"></div> <div class="bubble bubble-12"></div> <div class="bubble bubble-13"></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>
アイコンのあるブロックから始めましょう。 これは、エフェクト＃28の同じブロックと完全に似ています。詳細については、スタイル自体と@keyframesのみを示します。
.eff-30 .overlay { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; border-radius: 500px; background: rgba(255,255,255,0.6); } .eff-30 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 39px; left: 33px; } @keyframes bounce { from {top: 100px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 0px;} to {top: -200px;} }
次に、効果を使用して、ブロックの下の境界線の後ろに.captionを非表示にします。
.eff-30 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.4s linear 0s; }
内部の.caption要素はデフォルトのスタイルを保持します。
ここで楽しいのは、バブルブロックとバブル自体です。
泡のあるブロックのスタイル：
.eff-30 .bubbles { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
各バブルのスタイル（効果＃10の放射状グラデーションの詳細を参照）：
.eff-30 .bubbles .bubble { width: 43px; height: 43px; position: absolute; top: 100%; background: radial-gradient(circle at center center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) ); border-radius: 300px; }
さらに、私たちのタスクは、バブルが同じ場所に浮かないように、ランダムに水平に配置することです。
.eff-30 .bubbles .bubble-2 { left: 20px; } .eff-30 .bubbles .bubble-3 { left: 60px; } .eff-30 .bubbles .bubble-4 { left: 90px; } .eff-30 .bubbles .bubble-5 { left: 120px; } .eff-30 .bubbles .bubble-6 { left: 150px; } .eff-30 .bubbles .bubble-7 { left: 250px; } .eff-30 .bubbles .bubble-8 { left: 300px; } .eff-30 .bubbles .bubble-9 { left: 190px; } .eff-30 .bubbles .bubble-10 { left: 220px; } .eff-30 .bubbles .bubble-11 { left: 270px; } .eff-30 .bubbles .bubble-12 { left: 45px; } .eff-30 .bubbles .bubble-13 { left: 15px; }
そして、@ keyframes（これについては効果＃25で詳しく説明しました）は、2つのキーポイントで構成される最も単純なものです。
@keyframes bubble { from { top: 100%; } to { top: -100%; } }
効果を収集します。
アイコン付きのブロックアニメーションを追加し、効果＃25でアニメーションを詳細に調べ、効果＃27でアニメーション塗りつぶしモードパラメータを調べました。
.eff-30:hover .overlay { animation: bounce 0.6s linear forwards; }
次に、バブルを開始します。彼らのためにアニメーションを作成します。この場合、エフェクト＃25で考慮される他のパラメーターの中で、値が無限のanimation-iteration-countパラメーターを使用します。これは、アニメーションが無限の回数再生されることを意味します。カーソルがエフェクトのあるブロック上にある間、泡は飛んで止まりません：
.eff-30:hover .bubbles .bubble { animation: bubble 9s infinite; }
ここで、バブルも異なる時間に飛び出すように、遅延を設定します。
.eff-30:hover .bubbles .bubble-2 { animation-delay: 2s; } .eff-30:hover .bubbles .bubble-3 { animation-delay: 6s; } .eff-30:hover .bubbles .bubble-4 { animation-delay: 3.5s; } .eff-30:hover .bubbles .bubble-5 { animation-delay: 4s; } .eff-30:hover .bubbles .bubble-6 { animation-delay: 7.2s; } .eff-30:hover .bubbles .bubble-7 { animation-delay: 1s; } .eff-30:hover .bubbles .bubble-8 { animation-delay: 2.6s; } .eff-30:hover .bubbles .bubble-9 { animation-delay: 5s; } .eff-30:hover .bubbles .bubble-10 { animation-delay: 6.4s; } .eff-30:hover .bubbles .bubble-11 { animation-delay: 8s; } .eff-30:hover .bubbles .bubble-12 { animation-delay: 5.3s; } .eff-30:hover .bubbles .bubble-13 { animation-delay: 8.5s; }
.captionを上げるだけです：
.eff-30:hover .caption { top: 0px; transition-delay: 0.7s; }
私の記事がお役に立てて、新しい興味深い効果でサイトを飾ることができたらと思います！