CSSホバーエフェクトへの興味深いアプローチについて、一連の投稿を今すぐ歩いてきました。 CSSのバックグラウンドプロパティを使用する多くの例から始めて、テキスト-Shadowプロパティに移動(dòng)し、そこで技術(shù)的には影を使用しませんでした。また、それらをCSS変數(shù)とcalc（）と組み合わせて、コードを最適化し、管理しやすくしました。

この記事では、これらの2つの記事を構(gòu)築して、さらに複雑なCSSホバーアニメーションを作成します。私たちは、バックグラウンドのクリッピング、CSSマスク、さらには3Dの視點(diǎn)で足を濡らすことさえあります。言い換えれば、今回は高度なテクニックを探求し、CSSがホバーエフェクトでできることの限界を押し広げます！

クールなホバーエフェクトシリーズ：

1. バックグラウンドプロパティを使用するクールなホバーエフェクト
2. CSS TextShadowを使用するクールなホバーエフェクト
3. バックグラウンドクリッピング、マスク、3Dを使用するクールなホバーエフェクト（ここにいます！ ）

これが私たちが作っているものの味です：

バックグラウンドクリップを使用したホバーエフェクト

バックグラウンドクリップについて話しましょう。このCSSプロパティは、実際の背景ではなく要素のテキストに勾配を適用できるテキストキーワード値を受け入れます。

したがって、たとえば、色のプロパティを使用するように、ホバー上のテキストの色を変更できますが、このようにして色の変化をアニメーション化します。

私がしたのは、バックグラウンドクリップ：テキストを要素に追加し、バックグラウンドポジションを遷移することだけでした。それよりも複雑である必要はありません！

しかし、異なるバックグラウンドクリッピング値と複數(shù)の勾配を組み合わせると、より良いことができます。

その例では、2つの異なる勾配とバックグラウンドクリップで2つの値を使用します。最初のバックグラウンドグラデーションはテキストにクリップされ（テキスト値のおかげで）、ホバーに色を設(shè)定しますが、2番目のバックグラウンド勾配は下部の下線を作成します（パディングボックスの値のおかげ）。他のすべては、このシリーズの最初の記事で行った作業(yè)からまっすぐにコピーされています。

テキストがスキャンされているように見える方法でバーが上から下にスライドするホバー効果はどうですか。次に色付けされています。

今回は、最初のグラデーションのサイズを変更してラインを作成しました。次に、テキストの色を更新して幻想を作成する他のグラデーションでスライドします！このペンで何が起こっているのかを視覚化できます。

私たちは、バックグラウンドクリッピングの力でできることの表面を傷つけただけです！ただし、Firefoxはバックグラウンドクリップに関連する多くの報(bào)告バグを持っていることが知られているため、この手法は生産で使用しないようにしたいものです。 Safariにはサポートの問(wèn)題もあります。これにより、クロムだけがこのようなものを確実にサポートしているので、続行するにつれて開いているかもしれません。

バックグラウンドクリップを使用して別のホバーエフェクトに移動(dòng)しましょう。

おそらく、これは私たちがカバーしたものと比べて非常に簡(jiǎn)単に見えると思うでしょう。私がしているのは、別のサイズのサイズを増やしながら、1つの勾配をスライドさせることだけです。

しかし、私たちは高度なホバー効果を見るためにここにいますよね？マウスカーソルが要素を離れるときにアニメーションが異なるように、少し変更しましょう。同じホバー効果ですが、アニメーションとは別の結(jié)末です。

かっこいいよね？コードを分析しましょう。

 .hover {
  -C：＃1095C1; / *色 */

  色：＃0000;
  背景： 
    線形勾配（90deg、#fff 50％、var（ -  c）0）calc（100％-var（-_ p、0％）） / 200％、 
    線形勾配（var（ -  c）0 0）0％100％ / var（--_ p、0％）繰り返し、繰り返し、
    var（-_ c、＃0000）;
  -webkit-background-clip：テキスト、パディングボックス、パディングボックス。
          バックグラウンドクリップ：テキスト、パディングボックス、パディングボックス。
  遷移：0S、色.5S、バックグラウンドカラー.5S;
}
.hover：Hover {
  色：#fff;
  -_ c：var（ -  c）;
  -_ P：100％;
  遷移：0.5秒、色0S .5S、バックグラウンドカラー0S .5S;
}

3つの背景層があります。2つの勾配と、最初に透明に設(shè)定されている-_ C変數(shù)を使用して定義された背景色（＃0000）があります。ホバーでは、色を白に変え、-_ c変數(shù)はメイン色（ - c）に変えます。

その遷移で起こっていることは次のとおりです。最初に、すべてに移行を適用しますが、色と背景色を0.5秒遅らせてスライド効果を作成します。その後、色と背景色を変更します。テキストがすでに白であり（最初の勾配のおかげで）、背景がすでにメイン色に設(shè)定されているため、視覚的な変更がないことに気付かない場(chǎng)合があります（2番目の勾配のおかげです）。

次に、マウスアウトでは、遷移がある色と背景色を除き、すべてに即時(shí)変化を適用します（0S遅延に注意してください）。これは、すべての勾配を最初の狀態(tài)に戻すことを意味します。繰り返しますが、テキストの色と背景色がすでにHoverで変更されているため、おそらく視覚的な変更は見られません。

最後に、色あせを色と背景色に適用して、アニメーションのマウスアウト部分を作成します。把握するのは難しいかもしれませんが、さまざまな色を使用することでトリックをよりよく視覚化できます。

上記を何度もホバリングすると、ホバーでアニメーション化されているプロパティとマウスでアニメーション化されているプロパティが表示されます。次に、同じホバー効果のために2つの異なるアニメーションに到達(dá)した方法を理解できます。

このシリーズの前の記事で使用したドライスイッチング手法を忘れないでください。スイッチに1つの変數(shù)のみを使用してコードの量を減らすのに役立ちます。

 .hover {
  -C：16 149 193; / * RGB形式を使用した色 */

  色：RGB（255 255 255 / var（-_ i、0））;
  背景：
    / *勾配＃1 */
    線形勾配（90DEG、#FFF 50％、RGB（var（ -  c））0）calc（100％-var（--_ i、0） * 100％） / 200％、
    / *勾配＃2 */
    線形勾配（RGB（var（ -  c））0 0）0％100％ / calc（var（--_ i、0） * 100％）ノーレピート、
    / *背景色 */
    RGB（var（ -  c）/ var（-_ i、0））;
  -webkit-background-clip：テキスト、パディングボックス、パディングボックス。
          バックグラウンドクリップ：テキスト、パディングボックス、パディングボックス。
  -_ t：calc（var（-_ i、0）*。5s）;
  遷移： 
    var（-_t）、
    Color Calc（.5s-var（-_t））var（--_ t）、
    バックグラウンドカラーの計(jì)算（.5S-var（--_ t））var（--_ t）;
}
.hover：Hover {
  -_ i：1;
}

メイン色のRGB構(gòu)文に到達(dá)した理由を疑問(wèn)に思っているなら、それは私がアルファの透明性で遊ぶ必要があるからです。また、変數(shù)-_ Tを使用して、遷移プロパティで使用される冗長(zhǎng)計(jì)算を削減しています。

次の部分に移動(dòng)する前に、バックグラウンドクリップに依存して、少し前に行ったホバー効果のより多くの例があります。それぞれの詳細(xì)は長(zhǎng)すぎるでしょうが、これまでに學(xué)んだことを使用すると、コードを簡(jiǎn)単に理解できます。コードを見ずに一人で試してみるのは良いインスピレーションかもしれません。

私は知っています、私は知っています。これらはクレイジーで珍しいホバー効果であり、私はそれらがほとんどの狀況で多すぎることを認(rèn)識(shí)しています。しかし、これはCSSを練習(xí)して學(xué)習(xí)する方法です。覚えておいて、CSSホバーエフェクトの限界を押し進(jìn)めることを忘れないでください。ホバー効果は目新しいものかもしれませんが、私たちは他のことに最も確実に使用できる新しいテクニックを?qū)Wんでいます。

CSSマスクを使用したホバーエフェクト

何だと思う？ CSSマスクプロパティは、バックグラウンドプロパティが行うのと同じように勾配を使用しているため、次に作っているものが非常に簡(jiǎn)単であることがわかります。

派手なアンダーラインを構(gòu)築することから始めましょう。

背景を使用して、そのデモでZig-Zagのボトム境界線を作成しています。その下線にアニメーションを適用したい場(chǎng)合は、背景プロパティのみを使用してそれを行うのは面倒です。

CSSマスクを入力します。

コードは奇妙に見えるかもしれませんが、ロジックは以前のすべてのバックグラウンドアニメーションで行ったのと同じです。マスクは2つの勾配で構(gòu)成されています。最初の勾配は、コンテンツ領(lǐng)域をカバーする不透明な色で定義されます（コンテンツボックスの値のおかげ）。その最初のグラデーションは、テキストを表示し、底のジグザグの境界線を隠します。コンテンツボックスは、バックグラウンドクリップと同じように動(dòng)作するマスククリップ値です

線形勾配（＃000 0 0）コンテンツボックス

2番目の勾配は、エリア全體をカバーします（パディングボックスのおかげ）。これは、-_ P変數(shù)を使用して定義される幅を持ち、要素の左側(cè)に配置されます。

線形勾配（＃000 0 0）0 / var（--_ p、0％）パディングボックス

さて、私たちがしなければならないのは、ホバー上の-_ Pの値を変更して、2番目の勾配のスライド効果を作成し、下線を明らかにすることです。

 .hover：Hover {
  -_ P：100％;
  色：var（ -  c）;
}

次のデモは、マスクレイヤーを背景として使用して、トリックが起こっているのをよりよく見ることができます。緑と赤の部分が要素の目に見える部分であり、他のすべてが透明であると想像してください。同じ勾配を使用すると、マスクが行うことです。

このようなトリックを使用すると、Maskプロパティで別の勾配構(gòu)成を使用するだけで、多くのバリエーションを簡(jiǎn)単に作成できます。

そのデモの各例は、マスクにわずかに異なるグラデーション構(gòu)成を使用します。また、バックグラウンド構(gòu)成とマスク構(gòu)成の間のコードの分離にも注目してください。それらは獨(dú)立して管理および維持することができます。

代わりに、Zig-Zagの下線を波狀の下線に置き換えて、バックグラウンド構(gòu)成を変更しましょう。

ホバーエフェクトの別のコレクション！すべてのマスク構(gòu)成を保持し、背景を変更して異なる形狀を作成しました。今、あなたは私が擬似要素なしで400のホバー効果に到達(dá)することができた方法を理解することができます - そして、私たちはまだもっと持っていることができます！

そう、なぜこのようなものではないのか：

ここに課題があります。その最後のデモの境界は、マスクプロパティを使用してそれを明らかにするグラデーションです。アニメーションの背後にあるロジックを把握できますか？一見複雑に見えるかもしれませんが、勾配に依存する他のほとんどのホバー効果について、私たちが検討した論理に非常に似ています。コメントに説明を投稿してください！

3Dでのホバーエフェクト

単一の要素を使用して3D効果を作成することは不可能だと思うかもしれません（擬似要素に頼ることなく?。─SSにはそれを?qū)g現(xiàn)する方法があります。

あなたがそこに見ているのは、実際の3D効果ではなく、CSSの背景、クリップパス、および変換特性を組み合わせた2D空間での3Dの完全な幻想です。

私たちが最初に行うことは、変數(shù)を定義することです。

 -C：＃1095C1; /* 色 */
-b：.1em; / *境界長(zhǎng) */
-D：20px; / *キューブ深度 */

次に、上記の変數(shù)を使用する幅で透明な境界を作成します。

 -_ s：calc（var（ -  d）var（ -  b））;
色：var（ -  c）;
國(guó)境：ソリッド＃0000; / * 4番目の値は色のアルファを設(shè)定します */
境界線：var（ -  b）var（ -  b）var（--_ s）var（--_ s）;

要素の上部と右側(cè)は両方とも-b値に等しくする必要がありますが、底面と左側(cè)は-b and -d（-_ s変數(shù)です）の合計(jì)に等しくなります。

トリックの第2部では、以前に定義したすべての境界領(lǐng)域をカバーする1つの勾配を定義する必要があります。コニック勾配はそのために機(jī)能します：

背景：conic勾配（
  左のvar（--_ s）ボトムvar（--_ s）、
  ＃0000 90deg、var（ -  c）0
 ）） 
 0 100％ / calc（100％-var（ -  b））calc（100％-var（ -  b））border-box;

トリックの第3部に別の勾配を追加します。これは、最初の以前の勾配と重複する2つの半透明の白色値を使用して、メインカラーの異なる色合いを作成し、シェーディングと深さの錯(cuò)覚を與えます。

円錐勾配（
  左var（ -  d）ボトムvar（ -  d）、
  ＃0000 90deg、
  RGB（255 255 255 / 0.3）0 225deg、
  RGB（255 255 255 / 0.6）0
）ボーダーボックス

最後のステップは、CSSクリップパスを適用して、その長(zhǎng)い影の感觸のために角を切ることです。

クリップパス：ポリゴン（
  0％var（ -  d）、 
  var（ -  d）0％、 
  100％0％、 
  100％calc（100％-var（ -  d））、 
  calc（100％-var（ -  d））100％、 
  0％100％
））

それだけです！ CSS変數(shù)を使用して簡(jiǎn)単に調(diào)整できる2つの勾配とクリップパスだけで、3D長(zhǎng)方形を作成しました。さて、私たちがしなければならないのはそれをアニメーション化することだけです！

前の図（赤で示されている）の座標(biāo)に注意してください。それらを更新してアニメーションを作成しましょう。

クリップパス：ポリゴン（
  0％var（ -  d）、 / * var（ -  d）0％ * /
  var（ -  d）0％、 
  100％0％、 
  100％calc（100％-var（ -  d））、 
  calc（100％-var（ -  d））100％、 / * 100％calc（100％-var（ -  d）） * / 
  0％100％ / * var（ -  d）calc（100％-var（ -  d）） * /
））

トリックは、要素の底部と左部分を隠すことで、殘っているものはすべて深さのない長(zhǎng)方形の要素であることです。

このペンは、アニメーションのクリップパス部分を分離して、それが何をしているのかを確認(rèn)します。

最後のタッチは、翻訳を使用して要素を反対方向に移動(dòng)することです。幻想は完璧です！さまざまな深さに異なるカスタムプロパティ値を使用した効果は次のとおりです。

2番目のホバー効果は同じ構(gòu)造に従います。私がしたのは、右上のムーブメントではなく、左上の動(dòng)きを作成するためにいくつかの値を更新することです。

エフェクトを組み合わせる！

私たちがカバーしたすべてのことについて素晴らしいことは、それらがすべてお互いを補(bǔ)完することです。これは、シリーズの2番目の記事から、最初の記事のバックグラウンドアニメーション手法にテキストシャドウ効果を追加し、カバーしたばかりの3Dトリックを使用している例を示します。

実際のコードは最初は混亂している可能性がありますが、先に進(jìn)んでもう少し分析してください。これは、これらの3つの異なる効果の組み合わせにすぎないことに気付くでしょう。

この記事を最後のホバーエフェクトで終えさせてください。最後のホバーエフェクトで、背景、クリップパス、および一連の視點(diǎn)を組み合わせて、別の3D効果をシミュレートします。

同じ効果を畫像に適用しましたが、結(jié)果は3Dを単一の要素でシミュレートするのに非常に適していました。

その最後のデモがどのように機(jī)能するかを詳しく見たいですか？私はそれに何かを書きました。

まとめます

oof、私たちは終わりました！私は知っていますが、それは多くのトリッキーなCSSですが、（1）私たちはそのようなことのために適切なウェブサイトに載っています。

この小さなシリーズの高度なCSSホバーエフェクトを締めくくり、次のステップがここから何であるかを?qū)い亭毪猡筏欷蓼护?。次のステップは、學(xué)んだことすべてを取り、ボタン、メニュー項(xiàng)目、リンクなどの他の要素に適用することだと思います。その正確な理由で、トリックを見出し要素に制限する限り、私たちはかなりシンプルに保ちました。実際の要素は問(wèn)題ではありません。コンセプトを取り、それらと一緒に実行して、新しいことを作成し、実験し、學(xué)びましょう！

以上がバックグラウンドクリッピング、マスク、3Dを使用するクールなCSSホバーエフェクトの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。