バックグラウンドクリッピング、マスク、3Dを使用するクールなCSSホバーエフェクト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 .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つの勾配と、最初に透明に設定されている-_ C変数を使用して定義された背景色（＃0000）があります。ホバーでは、色を白に変え、-_ c変数はメイン色（ - c）に変えます。

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

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

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

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

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

 .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）、
    バックグラウンドカラーの計算（.5S-var（--_ t））var（--_ t）;
}
.hover：Hover {
  -_ i：1;
}

メイン色のRGB構文に到達した理由を疑問に思っているなら、それは私がアルファの透明性で遊ぶ必要があるからです。また、変数-_ Tを使用して、遷移プロパティで使用される冗長計算を削減しています。

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

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

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

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

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

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

CSSマスクを入力します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

単一の要素を使用して3D効果を作成することは不可能だと思うかもしれません（擬似要素に頼ることなく！）が、CSSにはそれを実現する方法があります。

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

私たちが最初に行うことは、変数を定義することです。

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

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

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

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

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

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

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

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

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

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

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

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

クリップパス：ポリゴン（
  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）） * /
））

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

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

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

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

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

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

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

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

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

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

まとめます

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

この小さなシリーズの高度なCSSホバーエフェクトを締めくくり、次のステップがここから何であるかを尋ねるかもしれません。次のステップは、学んだことすべてを取り、ボタン、メニュー項目、リンクなどの他の要素に適用することだと思います。その正確な理由で、トリックを見出し要素に制限する限り、私たちはかなりシンプルに保ちました。実際の要素は問題ではありません。コンセプトを取り、それらと一緒に実行して、新しいことを作成し、実験し、学びましょう！

以上がバックグラウンドクリッピング、マスク、3Dを使用するクールなCSSホバーエフェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。