サイズが大きいため、記事は3つの部分に分かれています。 第二部。 第三部。
デモ資料はこちらです。 すべてのプレフィックスはデモに添付されていますが、ここではそれらに焦点を合わせません。
警告：エフェクトは、CSS3機能をサポートする最新のブラウザーでのみ機能します。
仕事の準備。
エフェクトを作成するには、このようなデフォルトのHTML構造が必要です。 .effの代わりに、特定の各エフェクトのコードは.eff-nクラスを使用します。nはエフェクト番号です。
<div class="eff"> <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>
定義により、各エフェクトには少なくとも1つの画像、タイトルを含む説明ブロック、小さな説明、および「詳細を表示」ボタンがあります。 さらに、各効果にはいくつかの一意の補助要素が含まれており、これをメイン構造に追加します。
デフォルトのCSSスタイルは次のとおりです。
.eff { width: 300px; height: 300px; overflow: hidden; position: relative; cursor: pointer; } .eff img { min-width: 100%; min-height: 100%; } .eff .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff .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; } .eff .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 .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; } .eff .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; text-decoration: none; }
効果＃1
例
アイコン付きのブロックをhtmlコードに追加します。 これは、半透明の背景を持つコンテナと、円要素と内部のアイコンを持つ回転コンテナで構成されています。 新しいブロックのデフォルトコードは次のようになります。
<div class="effect eff-1"> <img src="img/ef1.jpg" alt="Effect #1" /> <div class="overlay"> <div class="circle-with-icon"> <div class="circ left-circ"></div> <div class="circ top-circ"></div> <div class="circ right-circ"></div> <div class="circ bottom-circ"></div> <div class="icon"></div> </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>
最初の段階-.captionを非表示にし、必要に応じて透明度とトランジションを追加して滑らかな外観にします：
.eff-1 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; }
次に、.overlayを定型化し、ホバリングすると増加し、完全な透明度にフェードします。
.eff-1 .overlay { width: 180px; height: 120px; background: rgba(255,255,255,0.6); position: absolute; top: 90px; left: 60px; transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s; }
この要素のホバー状態のスタイルを定義するときに、サイズと透明度を上げるための遅延を設定します。ホバーが削除された後、.overlayの外観に遅延が設定され、効果が元の位置に戻されるようになりました。
次に、クラス.circを持つ要素の中心にアイコンのある円を作成します。 円が徐々に並んで正方形になるように、4つのブロックから組み立てます。各ブロックには丸い境界線が1つだけ与えられます。
.eff-1 .overlay .circ { width: 80px; height: 80px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0px; left: 0px; background: transparent; } .eff-1 .overlay .left-circ { border-left: 2px solid black; transition: all 0.15s linear 0.3s; } .eff-1 .overlay .top-circ { border-top: 2px solid black; transition: all 0.15s linear 0.2s; } .eff-1 .overlay .right-circ { border-right: 2px solid black; transition: all 0.15s linear 0.1s; } .eff-1 .overlay .bottom-circ { width: 82px; border-bottom: 2px solid black; transition: all 0.15s linear 0s; }
アイコンのスタイル：
.eff-1 .circle-with-icon .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 31px; left: 24px; }
.circle-with-iconのスタイルを設定して、円が背景の中央に立って回転できるようにします。
.eff-1 .overlay .circle-with-icon { width: 82px; height: 82px; margin: auto; position: relative; top: 19px; transition: transform 0.4s linear 0s; }
効果を収集します。
.circle-with-iconをねじります：
.eff-1:hover .circle-with-icon { transform: rotate(360deg); }
円を正方形に変えます：
.eff-1:hover .overlay .circ { -webkit-border-radius: 0px; border-radius: 0px; }
.overlayを増やして透明度を変更します。
.eff-1:hover .overlay { transform: scale(5); opacity: 0; transition-delay: 0.55s; }
マニフェスト.caption：
.eff-1:hover .caption { opacity: 1; transition-delay: 0.85s; }
効果＃2
例
この効果の場合、html構造は前の効果の構造と同様になります。
<div class="effect eff-2"> <img src="img/ef2.jpg" alt="Effect #2" /> <div class="overlay"> <div class="circle-with-icon"> <div class="circ left-circ"></div> <div class="circ top-circ"></div> <div class="circ right-circ"></div> <div class="circ bottom-circ"></div> <div class="icon"></div> </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>
このエフェクトの.captionは右に移動するため、エフェクトを使用してブロックの端を越えて右に移動して非表示にします。
.eff-2 .caption { position: absolute; top: 0px; left: 100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
.caption要素のスタイルはデフォルトのままです。
背景、円、アイコンを含むブロックのスタイルとロジックも、transitionプロパティの値を除いて、前の効果に似ています。
.eff-2 .overlay { width: 180px; height: 120px; background: rgba(255,255,255,0.6); position: absolute; top: 90px; left: 60px; transition: all 0.2s linear 0.55s; } .eff-2 .overlay .circ { width: 80px; height: 80px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0px; left: 0px; background: transparent; } .eff-2 .overlay .left-circ { border-left: 2px solid black; transition: all 0.15s linear 0.3s; } .eff-2 .overlay .top-circ { width: 82px; border-top: 2px solid black; transition: all 0.15s linear 0.2s; } .eff-2 .overlay .right-circ { border-right: 2px solid black; transition: all 0.15s linear 0.1s; } .eff-2 .overlay .bottom-circ { width: 82px; border-bottom: 2px solid black; transition: all 0.15s linear 0s; } .eff-2 .circle-with-icon .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 31px; left: 24px; }
.circle-with-iconの場合、transition-delayおよびtransition-durationも変更されます。
.eff-2 .overlay .circle-with-icon { width: 82px; height: 82px; margin: auto; position: relative; top: 19px; transition: all 0.2s linear 0.8s; }
効果を収集します。
まず、.circは真っ直ぐになるだけでなく、45度回転して菱形を作成します。
.eff-2:hover .overlay .circ { border-radius: 0px; transform: rotate(45deg); }
次に、菱形とアイコンのあるブロック全体が消えます：
.eff-2:hover .overlay .circle-with-icon { opacity: 0; transition-delay: 0.4s; }
素材はブロックサイズ全体に拡張され、次の効果があります。
.eff-2:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; }
キャプションを残す：
.eff-2:hover .caption { left: 0px; transition-delay: 0.7s; }
効果＃3
例
この効果のために、html構造は効果＃1-2に似ており、背景、円、アイコンのあるブロックもここに追加されます。
<div class="effect eff-3"> <img src="img/ef3.jpg" alt="Effect #3" /> <div class="overlay"> <div class="circle-with-icon"> <div class="circ left-circ"></div> <div class="circ top-circ"></div> <div class="circ right-circ"></div> <div class="circ bottom-circ"></div> <div class="icon"></div> </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>
今回は.captionがブロックの端を越えて上にシフトされ、効果があります：
.eff-3 .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-3 .overlay { width: 180px; height: 120px; background: rgba(255,255,255,0.6); position: absolute; top: 90px; left: 60px; transition: all 0.2s linear 0.65s; }
.circおよび.circle-with-iconスタイルは、エフェクト＃1-2と同じままです。
.eff-3 .overlay .circ { width: 80px; height: 80px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0px; left: 0px; background: transparent; } .eff-3 .overlay .circle-with-icon { width: 82px; height: 82px; margin: auto; position: relative; top: 19px; opacity: 1; }
ホバーすると、円の異なる部分の動作が異なるため、それらの遷移値も異なります。
左側と右側はゆっくりとフェードします。
.eff-3 .overlay .left-circ { border-left: 2px solid black; transition: border-color 0.3s linear 0s; } .eff-3 .overlay .right-circ { border-right: 2px solid black; transition: border-color 0.3s linear 0s; }
底面は真っ直ぐになり、右に出て、しばらくすると透明になります。そのため、ホバーを削除しても、その場所に戻る方法はわかりません。
.eff-3 .overlay .bottom-circ { width: 82px; border-bottom: 2px solid black; transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; }
さて、上の部分は下の部分と同じことをすべて行いますが、まっすぐになりますが、まだ下がっています：
.eff-3 .overlay .top-circ { width: 82px; border-top: 2px solid black; transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; }
アイコンの遷移も追加されます。
.eff-3 .circle-with-icon .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 31px; left: 24px; transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; }
効果を収集します。
まず、円の右側と左側が消えます：
.eff-3:hover .overlay .left-circ, .eff-3:hover .overlay .right-circ { border-color: transparent; }
次に、上部が下部に下降します。
.eff-3:hover .overlay .top-circ { top: 93%; }
その過程で、彼らは真っ直ぐになり、その後、右に走り去ります。
.eff-3:hover .overlay .top-circ, .eff-3:hover .overlay .bottom-circ { -webkit-border-radius: 0px; border-radius: 0px; left: 500%; opacity: 0; }
アイコンは左に移動します。
.eff-3:hover .circle-with-icon .icon { left: -500%; opacity: 0; }
素材は中央に折り畳まれます：
.eff-3:hover .overlay { transform: scale(0); }
.captionが表示されます。
.eff-3:hover .caption { top: 0px; transition-delay: 0.75s; }
効果＃4
例
基本的なHTML構造に、ホバーすると表示される素材、アイコン、および境界線を含むブロックを追加します。
<div class="effect eff-4"> <img src="img/ef4.jpg" alt="Effect #4" /> <div class="overlay"> <div class="icon"></div> <div class="borders"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </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>
次に、.captionを非表示にしますが、全体ではなく、各要素を個別に非表示にして、順番に表示します。
.eff-4 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-4 .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-4 .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-4 .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-4 .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; }
次に、.overlayとアイコンのスタイルを設定します。 アイコンは、素材の拡張中に消えるので、別のトランジションが必要です。
.eff-4 .overlay { width: 60px; height: 60px; background: rgba(255,255,255,0.6); position: absolute; top: 120px; left: 120px; transition: all 0.2s linear 0s; } .eff-4 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 18px; left: 13px; opacity: 1; transition: all 0.01s linear 0.2s; }
次に、境界線を持つコンテナのスタイルを指定する必要があります。
.eff-4 .borders { width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; opacity: 0; transition: all 0.01s linear 0s; }
すべての境界線に共通のスタイル：
.eff-4 .border { background: black; position: absolute; transition: all 0.2s linear 0s; }
そして、それぞれの位置、幅、高さ：
.eff-4 .border-top { height: 2px; width: 0px; top: 0px; left: 0px; } .eff-4 .border-right { height: 0px; width: 2px; top: 2px; right: 0px; } .eff-4 .border-bottom { height: 2px; width: 0px; bottom: 0px; right: 2px; } .eff-4 .border-left { height: 0px; width: 2px; bottom: 2px; left: 0px; }
効果を収集します。
素材が最初に拡張します。
.eff-4:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; }
同時に、アイコンが消えます。 そのため、素材が拡大し始めるとすぐに消えるように遷移遅延をホバーするときにキャンセルしますが、ホバーを削除すると、素材が正しいサイズに戻った後にのみ表示されます。
.eff-4:hover .overlay .icon { opacity: 0; transition-delay: 0s; }
次に、境界線でコンテナの透明度を変更します。
.eff-4:hover .borders { opacity: 1; }
最後に、境界線が次々に変化するように、このような遷移遅延を選択して、各境界線のサイズを変更します。
.eff-4:hover .border-top { width: 100%; transition-delay: 0.2s; } .eff-4:hover .border-right { height: 100%; max-height: calc(100% - 2px); transition-delay: 0.4s; } .eff-4:hover .border-bottom { width: 100%; max-width: calc(100% - 2px); transition-delay: 0.6s; } .eff-4:hover .border-left { height: 100%; max-height: calc(100% - 4px); transition-delay: 0.8s; }
.caption要素を表示するだけです。
.eff-4:hover .caption h4, .eff-4:hover .caption p, .eff-4:hover .caption a { opacity: 1; } .eff-4:hover .caption h4 { transition-delay: 0.65s; } .eff-4:hover .caption p { transition-delay: 0.7s; } .eff-4:hover .caption a { transition-delay: 0.75s; }
効果＃5
例
今回は、外部と内部の境界を持つ2つのブロックでデフォルト構造を補完します。
<div class="effect eff-5"> <img src="img/ef5.jpg" alt="Effect #5" /> <div class="overlay"> <div class="icon"></div> <div class="borders"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> <div class="borders-small"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </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>
今回は、.caption要素も1つずつ非表示になります。
.eff-5 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-5 .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-5 .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-5 .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-5 .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-5 .overlay { width: 60px; height: 60px; background: rgba(255,255,255,0.6); position: absolute; top: 120px; left: 120px; transition: all 0.2s linear 0s; } .eff-5 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 18px; left: 13px; opacity: 1; transition: all 0.01s linear 0.2s; }
境界線を持つ2つのコンテナーのスタイルを指定します。
.eff-5 .borders { width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; opacity: 0; transition: all 0.01s linear 0s; } .eff-5 .borders-small { width: 88%; height: 88%; position: absolute; top: 6%; left: 6%; opacity: 0; transition: all 0.01s linear 0s; }
大小のすべての境界線に共通のスタイル：
.eff-5 .border { background: black; position: absolute; transition: all 0.3s linear 0s; }
各境界線のスタイルを設定します。 初期座標が小さいものと大きいものが異なるため、ホバリングすると、互いの方向に増加します。
.eff-5 .borders .border-top { top: 0px; left: 0px; width: 0px; height: 2px; } .eff-5 .borders .border-left { top: 0px; left: 0px; width: 2px; height: 0px; } .eff-5 .borders .border-bottom { bottom: 0px; right: 0px; width: 0px; height: 2px; } .eff-5 .borders .border-right { bottom: 0px; right: 0px; width: 2px; height: 0px; } .eff-5 .borders-small .border-top { top: 0px; right: 0px; width: 0px; height: 2px; } .eff-5 .borders-small .border-left { bottom: 0px; left: 0px; width: 2px; height: 0px; } .eff-5 .borders-small .border-bottom { bottom: 0px; left: 0px; width: 0px; height: 2px; } .eff-5 .borders-small .border-right { top: 0px; right: 0px; width: 2px; height: 0px; }
効果を収集します。
ホバリングするときに、素材を展開してアイコンを削除します。 効果＃4のアイコンの遷移遅延について詳しく説明しました。
.eff-5:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } .eff-5:hover .overlay .icon { opacity: 0; transition-delay: 0s; }
境界線のあるコンテナの透明度を変更します。
.eff-5:hover .borders, .eff-5:hover .borders-small { opacity: 1; }
境界線の動きのスタイルを定義します。
.eff-5:hover .border-top, .eff-5:hover .border-bottom { width: 100%; transition-delay: 0.2s; } .eff-5:hover .border-left, .eff-5:hover .border-right { height: 100%; transition-delay: 0.2s; }
効果＃4よりも長い時間間隔でボトムアップで.caption要素を開発することが残っています。
.eff-5:hover .caption h4, .eff-5:hover .caption p, .eff-5:hover .caption a { opacity: 1; } .eff-5:hover .caption h4 { transition-delay: 0.75s; } .eff-5:hover .caption p { transition-delay: 0.65s; } .eff-5:hover .caption a { transition-delay: 0.55s; }
効果＃6
例
デフォルトの構造は、サブストレート、アイコン、および境界線を持つ1つのブロックによって補完されます。
<div class="effect eff-6"> <img src="img/ef6.jpg" alt="Effect #6" /> <div class="overlay"> <div class="icon"></div> <div class="borders"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </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>
.captionは中央から表示されるため、背景のように増加して、次のスタイルを適用します。
.eff-6 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transform: scale(0); transition: all 0.3s linear 0s; }
すべての.caption要素はデフォルトのスタイルのままです。
.overlayとアイコンのスタイル：
.eff-6 .overlay { width: 60px; height: 60px; background: rgba(255,255,255,0.6); position: absolute; top: 120px; left: 120px; transition: all 0.2s linear 0s; } .eff-6 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 18px; left: 13px; opacity: 1; transition: all 0.01s linear 0.2s; }
境界線のあるコンテナのスタイル：
.eff-6 .borders { width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; opacity: 0; transition: all 0.01s linear 0s; }
すべての境界線に共通のスタイル：
.eff-6 .border { background: black; position: absolute; transition: all 0.4s linear 0s; }
次に、各境界線のスタイルを個別に規定します。 最も重要なことはtransform-originです。これは、各境界線がスクロールするポイントに関して決定します。
.eff-6 .border-top { top: 0px; left: 2px; width: 100%; height: 2px; transform-origin: left top; } .eff-6 .border-left { bottom: 0px; left: 0px; width: 2px; height: 100%; transform-origin: left bottom; } .eff-6 .border-bottom { bottom: 0px; right: 2px; width: 100%; height: 2px; transform-origin: right bottom; } .eff-6 .border-right { top: 0px; right: 0px; width: 2px; height: 100%; transform-origin: right top; }
効果を収集します。
.overlayを拡張し、アイコンを削除します。 効果＃4のアイコンの遷移遅延について詳しく説明しました。
.eff-6:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } .eff-6:hover .overlay .icon { opacity: 0; transition-delay: 0s; }
境界のあるブロックの透明度を変更します。
.eff-6:hover .borders { opacity: 1; }
次に、指定されたポイントを基準にして境界線を90度スクロールします。
.eff-6:hover .border-top, .eff-6:hover .border-left, .eff-6:hover .border-bottom, .eff-6:hover .border-right { transform: rotate(90deg); transition-delay: 0.2s; }
.captionを増やします。
.eff-6:hover .caption { opacity: 1; transform: scale(1); transition-delay: 0.65s; }
効果＃7
例
この効果では、画像は右に残り、5つの部分に分かれます。 5つの部分の錯覚を作成するには、分割する部分の数と同じ数の画像のコピーをhtml構造に追加する必要があります。各画像を画像全体の個別の部分として操作します。
<div class="effect eff-7"> <div class="img-block"> <div class="img img-1"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-2"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-3"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-4"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-5"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> </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>
.img-blockおよびすべての.imgのスタイルを定義します。
.eff-7 .img-block { position: relative; height: 100%; } .eff-7 .img-block .img { position: absolute; width: 100%; height: 100%; overflow: hidden; transition: all 0.2s linear 0s; }
ここでのタスクは、各imgタグとその中に画像を配置して、すべてが1枚の画像のように見えるようにすることです。 したがって、.imgブロックを1つずつ20％のインデントでオーバーラップして配置し、次のブロックごとにz-indexを増やし、それぞれのブロック内の画像をブロック自体に対して20％高く移動します。
そのため、一番上にある最初の.imgブロックでは、変更はありません。スタイルは次のとおりです。
.eff-7 .img-block .img-1 { top: 0px; left: 0px; z-index: 2; }
2番目のブロックを20％低くし、その中の画像を20％上げる必要があります。
.eff-7 .img-block .img-2 { top: 20%; left: 0px; z-index: 3; } .eff-7 .img-block .img-2 img { transform: translateY(-20%); }
3番目、4番目、5番目はそれぞれ40％、60％、80％低下し、それらの画像は同じ割合で上昇します。
.eff-7 .img-block .img-3 { top: 40%; left: 0px; z-index: 4; } .eff-7 .img-block .img-3 img { transform: translateY(-40%); } .eff-7 .img-block .img-4 { top: 60%; left: 0px; z-index: 5; } .eff-7 .img-block .img-4 img { transform: translateY(-60%); } .eff-7 .img-block .img-5 { top: 80%; left: 0px; z-index: 6; } .eff-7 .img-block .img-5 img { transform: translateY(-80%); }
すべての写真の下にある、z-indexのおかげで、非表示の.captionを使用します。 .captionには透明度を指定します。そうしないと、画像が読み込まれている間、このブロックが1秒間表示され、「点滅」効果につながります。
.eff-7 .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.2s; }
.caption要素のスタイルはデフォルトのままです。
アイコンを使用して.overlayのみを実行します。
.eff-7 .overlay { width: 200px; height: 200px; background: rgba(255,255,255,0.6); position: absolute; left: 70%; top: 70%; border-radius: 500px; z-index: 10; transition: all 0.2s linear 0.2s; } .eff-7 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 47px; left: 40px; }
効果を収集します。
最初のホバーが下がり、横向きになります。オーバーレイ：
.eff-7:hover .overlay { top: 100%; left: 100%; transition-delay: 0s; }
その後、すべての.imgブロックが1つずつ横に移動します。 さて、0以外のtransition-delayなので、それらをホバーにのみ置いて、すべてのブロックが全体として同時に返されます。
.eff-7:hover .img-block .img { left: 100%; } .eff-7:hover .img-block .img-1 { transition-delay: 0.2s; } .eff-7:hover .img-block .img-2 { transition-delay: 0.3s; } .eff-7:hover .img-block .img-3 { transition-delay: 0.4s; } .eff-7:hover .img-block .img-4 { transition-delay: 0.5s; } .eff-7:hover .img-block .img-5 { transition-delay: 0.6s; }
そして、透明度.captionを削除します。
.eff-7:hover .caption { opacity: 1; }
効果＃8
例
前の効果と同じように、ここには1つの画像がありませんが、5つの画像が互いに重なり合って操作し、1つの画像が5つの部分に分解されているような錯覚を作成します。 html構造は次のとおりです。
<div class="effect eff-8"> <div class="img-block"> <div class="img img-1"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-2"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-3"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-4"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-5"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> </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>
.img-blockのスタイルとすべての.imgに共通：
.eff-8 .img-block { position: relative; height: 100%; } .eff-8 .img-block .img { position: absolute; width: 100%; height: 100%; overflow: hidden; transition: all 0.2s linear 0s; }
この場合、各.imgブロックを前のブロックの20％低く左に移動してzインデックスを増やし、その中の画像をそれぞれ20％高く右に移動して、.imgブロックに一種の「角」を形成します（詳細は効果＃7）。
.eff-8 .img-block .img-1 { top: 0px; left: 0px; z-index: 2; } .eff-8 .img-block .img-2 { top: 20%; right: 20%; z-index: 3; } .eff-8 .img-block .img-2 img { transform: translate(20%, -20%); } .eff-8 .img-block .img-3 { top: 40%; right: 40%; z-index: 4; } .eff-8 .img-block .img-3 img { transform: translate(40%, -40%); } .eff-8 .img-block .img-4 { top: 60%; right: 60%; z-index: 5; } .eff-8 .img-block .img-4 img { transform: translate(60%, -60%); } .eff-8 .img-block .img-5 { top: 80%; right: 80%; z-index: 6; } .eff-8 .img-block .img-5 img { transform: translate(80%, -80%); }
.captionのスタイルは、効果＃7のスタイルに似ています。同じ場所で透明性の必要性について読むことができます。
.eff-8 .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.2s; }
他の.caption要素にはデフォルトのスタイルがあります。
.overlayとアイコンを追加します。
.eff-8 .overlay { width: 200px; height: 200px; background: rgba(255,255,255,0.6); position: absolute; left: 70%; top: 70%; border-radius: 500px; z-index: 10; transition: all 0.2s linear 0.2s; } .eff-8 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 47px; left: 40px; }
効果を収集します。
オーバーレイが消えます：
.eff-8:hover .overlay { top: 100%; left: 100%; transition-delay: 0s; }
.imgブロックの透明度を下げて、順番に消えます：
.eff-8:hover .img-block .img { opacity: 0; } .eff-8:hover .img-block .img-1 { transition-delay: 0.25s; } .eff-8:hover .img-block .img-2 { transition-delay: 0.4s; } .eff-8:hover .img-block .img-3 { transition-delay: 0.55s; } .eff-8:hover .img-block .img-4 { transition-delay: 0.7s; } .eff-8:hover .img-block .img-5 { transition-delay: 0.85s; }
.captionの透明度を返します：
.eff-8:hover .caption { opacity: 1; }
効果＃9
例
この場合、画像は4つの部分に分割されるため、効果＃7の場合よりも内側の画像の配置がわずかに複雑な4つのブロックしかありません。
<div class="effect eff-9"> <div class="img-block"> <div class="img img-1"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> <div class="img img-2"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> <div class="img img-3"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> <div class="img img-4"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> </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>
.img-blockのスタイルとすべての.imgに共通：
.eff-9 .img-block { position: relative; height: 100%; } .eff-9 .img-block .img { position: absolute; width: 100%; overflow: hidden; transition: all 0.25s linear 0s; }
次に、各.imgブロックをその場所に配置します。最初のものは左上隅にあり、内側の写真には触れません。
.eff-9 .img-block .img-1 { top: 0px; left: 0px; z-index: 2; height: 100%; }
2番目のブロックを右上隅に配置し、画像を50％左に移動します。
.eff-9 .img-block .img-2 { top: 0%; left: 50%; z-index: 3; height: 100%; } .eff-9 .img-block .img-2 img { transform: translate(-50%, 0); }
3番目のブロックは左下に表示され、画像を50％上にシフトします。
.eff-9 .img-block .img-3 { top: 50%; left: 0%; z-index: 4; height: 100%; } .eff-9 .img-block .img-3 img { transform: translate(0%, -50%); }
さて、4番目は右下にあり、画像は左上に移動します。
.eff-9 .img-block .img-4 { top: 50%; left: 50%; z-index: 5; height: 100%; } .eff-9 .img-block .img-4 img { transform: translate(-50%, -50%); }
したがって、エフェクト＃7〜＃8と同様に、.overlayと.captionを配置するだけです。.captionの透過性の必要性については、効果＃7で詳しく説明します。
.eff-9 .overlay { width: 200px; height: 200px; background: rgba(255,255,255,0.6); position: absolute; left: 70%; top: 70%; border-radius: 500px; z-index: 10; transition: all 0.3s linear 0s; } .eff-9 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 47px; left: 40px; } .eff-9 .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.4s; }
すべての.caption要素にはデフォルトのスタイルがあります。
効果を収集します。
.overlayを削除して、不透明度.captionを返します。
.eff-9:hover .overlay { top: 100%; left: 100%; transition-delay: 0s; } .eff-9:hover .caption { opacity: 1; }
さて、一つ一つ、写真で透明なブロックを作ります：
.eff-9:hover .img-block .img { opacity: 0; } .eff-9:hover .img-block .img-1 { transition-delay: 0.2s; } .eff-9:hover .img-block .img-2 { transition-delay: 0.4s; } .eff-9:hover .img-block .img-3 { transition-delay: 0.6s; } .eff-9:hover .img-block .img-4 { transition-delay: 0.8s; }
効果＃10
例
この効果のために、デフォルトのhtml構造には、アイコン付きの.overlayブロックとグラデーション用のブロックが補充されます。
<div class="effect eff-10"> <img src="img/ef10.jpg" alt="Effect #10" /> <div class="overlay"> <div class="icon"></div> </div> <div class="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>
.captionのスタイルは、.captionが中心から垂直に拡張するようなものです。
.eff-10 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transform: scaleY(0); transition: all 0.2s linear 0s; }
.Caption要素にはデフォルトのスタイルがあります。
今スタイル.overlay：
.eff-10 .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; }
Transform-originの場合、X軸にのみ値を設定します。ここではY軸は必要ありません。ご覧のとおり、変換は水平方向にのみ発生します。
アイコンのスタイルは、.overlayアニメーションが始まるとすぐに消えるので、ホバリングするように設定し、すぐに戻ります。
.eff-10 .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; }
グラデーションのあるブロックになりました。グラデーションを作成するには、最初にその外観を示す必要があります-この場合-放射状、そして次に放射状グラデーションの形状：円または楕円、そしてこの場合、それは円、よく、そして第三に、トランジションには少なくとも2つの色があります。最初の色は中央にあり、2番目の色はエッジの周りにあります。
.eff-10 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7)); opacity: 0; transition: all 0.3s linear 0.2s; }
効果を収集します。
最初に、正しい.overlayを削除します。
.eff-10:hover .overlay { transform: scaleX(0); } .eff-10:hover .overlay .icon { opacity: 0; transition-delay: 0s; }
グラデーションでブロックの透明度を変更します。
.eff-10:hover .gradient { opacity: 1; transition-delay: 0.2s; }
中央から.captionを展開します。
.eff-10:hover .caption { transform: scaleY(1); transition-delay: 0.45s; }
効果＃11
例
この効果については、前のものと同様に、html構造にアイコン付きの素材ブロックとグラデーション付きのブロックが追加されています。
<div class="effect eff-11"> <img src="img/ef11.jpg" alt="Effect #11" /> <div class="overlay"> <div class="icon"></div> </div> <div class="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>
.captionのスタイル：
.eff-11 .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要素にはデフォルトのスタイルがあります。
グラデーションブロック。効果＃10で考慮された放射状グラデーションとは異なり、線形グラデーションの構築方法は少し異なります。勾配が垂直または水平の場合は1つのパラメーター、勾配が対角線の場合は2つのパラメーターが存在する方向を示す必要があります。さらに、方向は角度で設定できます。これについては、効果＃12で詳しく説明します。それ以外の点はすべて同じです。
さらに、X軸に沿ってグラデーションブロックをゼロにスケーリングし、アニメーションが発生する基準点を左端の位置に設定します。そのため、ブロックは左から右に展開し、プロセスでますます不透明になります。
.eff-11 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to top right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transform: scaleX(0); opacity: 0; transform-origin: left; transition: transform 0.15s linear 0s, opacity 0.55s linear 0s; }
アイコン付きの.overlayブロックについては、効果＃10の説明で詳しく説明しています。
.eff-11 .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-11 .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; }
効果を収集します。
右側の.overlayを削除します。
.eff-11:hover .overlay { transform: scaleX(0); } .eff-11:hover .overlay .icon { opacity: 0; transition-delay: 0s; }
勾配のあるブロックを繰り出す：
.eff-11:hover .gradient { transform: scaleX(1); opacity: 1; transition-delay: 0.2s; }
そして、勾配のあるブロックはほぼ完全に不透明になりました：1; .captionが表示されます：
.eff-11:hover .caption { opacity: 1; transition-delay: 0.5s; }