CSSテキストシャドウを使用する4クールなホバーエフェクト

前の記事では、CSSバックグラウンドプロパティを使用してクールなホバーエフェクトを作成する方法について説明しました。今回は、CSSのtext-shadowプロパティに焦点を当て、より興味深いホバー効果を調査します。テキストにシャドウを追加することでクールな効果があるのか​​疑問に思うかもしれませんが、ポイントは次のとおりです。これらのテキストホバー効果の影は実際には作成されません。

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

1. バックグラウンドプロパティを使用して、クールなホバー効果を実現します
2. CSSテキストシャドウを使用して、クールなホバー効果を実現します（現在の場所！）
3. バックグラウンドトリッピング、マスキング、3Dを使用して、クールなホバーエフェクトを実現します

text-shadowですが、テキストシャドウはありませんか？

次のデモで構築するホバー効果によって混乱を取り除きましょう。

コードを見ることなく、あなたの多くは、ホバー効果ごとに、テキストをコピーして独立してアニメーション化することを直感的に考えるでしょう。これで、コードを見ると、HTMLのテキストが実際にコピーされていないことがわかります。 CSSではcontent: "text"気づきましたか？

テキストレイヤーはtext-shadowで完全に作成されます！

ホバーエフェクト＃1

CSSコードを分解しましょう：

 .hover-1 {
  Line-Height：1.2em;
  色：＃0000;
  テキストシャドウ： 
    0 0＃000、 
    0 1.2EM＃1095C1;
  オーバーフロー：隠し;
  トランジション：.3S;
}
.hover-1：Hover {
  テキストシャドウ： 
    0 -1.2EM＃000、 
    0 0＃1095C1;
}

最初に注意すべきことは、実際のテキストを非表示にするために、実際のテキストの色を透明性に設定することです（ #0000を使用）。その後、 text-shadowを使用して2つの影を作成します。それぞれが2つの長さの値のみを定義します。これは、ぼやけた半径がなく、指定された色のテキストのコピーを効果的に生成する透明で鋭い影をもたらすことを意味します。

だから私は紹介でここに影がないと主張しました。私たちがしていることは、テキストをコピーする簡単な方法ほど「クラシックな」影ではありません。

ホバリング時に移動する2つのテキストレイヤーがあります。オーバーフローを非表示にすると、重複したテキストが見えなくなり、実際のテキストが他のテキストに置き換えられているように見えます。これは、この記事のすべての例を適切に機能させる主なトリックです。

コードを最適化しましょう。値1.2em複数回使用して影の高さとオフセットを定義し、CSSカスタムプロパティの理想的な候補となっています（私たちはそれを--hと呼びます）：

 .hover-1 {
  --H：1.2EM;

  ラインハイト：var（ -  h）;
  色：＃0000;
  テキストシャドウ： 
    0 0＃000、 
    0 var（ -  h）＃1095c1;
  オーバーフロー：隠し;
  トランジション：.3S;
}
.hover-1：Hover {
  テキストシャドウ： 
    0 calc（-1 * var（ -  h））＃000、 
    0 0＃1095C1;
}

また、より多くのcalc()計算を使用してコードをさらに簡素化することができ、 text-shadow 1回しか使用できません。 （前の投稿で同じことをしました。）

 .hover-1 {
  --H：1.2EM;   

  ラインハイト：var（ -  h）;
  色：＃0000;
  テキストシャドウ： 
    0 calc（-1*var（-_t、0em））＃000、 
    0 calc（var（ -  h） -  var（--_ t、0em））＃1095c1;
  オーバーフロー：隠し;
  トランジション：.3S;
}
.hover-1：Hover {
  -_ T：var（ -  h）;
}

--_t変数にアンダースコアを追加する理由を疑問に思っている場合、これは、ユーザーが最適化のみに使用され、変更する必要がない内部変数（ --_tなど）から更新できる変数（ --hなど）を区別するために使用する命名規則です。言い換えれば、アンダースコアは変数名の一部であり、特別な意味はありません。

また、コードを更新して、逆の効果を取得することもできます。

text-shadowプロパティにわずかな更新しか作成しませんでした。他に何も触れませんでした！

ホバーエフェクト＃2

この効果については、 text-shadowとbackground 2つのプロパティをアニメーション化します。 text-shadowに関しては、前の例のような2つのレイヤーがまだありますが、今回は他のレイヤーの色をスワップ中に透明に設定しながら、そのうちの1つだけを移動します。

 .hover-2 {
  /* 高い*/
  --H：1.2EM;

  ラインハイト：var（ -  h）;
  色：＃0000;
  テキストシャドウ： 
    0 var（-_t、var（ -  h））#fff、
    0 0 var（-_ c、＃000）;
  遷移：0.3s;
}
.hover-2：Hover {
  -_T：0;
  -_ C：＃0000;
}

ホバーでは、他のレイヤーの色を透明に変えながら、白いテキスト層を上部に移動します。これを行うために、グラデーションに適用されるbackground-sizeアニメーションを追加しました。

最後に、 overflow: hiddenを追加して、アニメーションを要素の境界内でのみ見えるようにします。

 .hover-2 {
  /* 高い*/
  --H：1.2EM;

  ラインハイト：var（ -  h）;
  色：＃0000;
  テキストシャドウ： 
    0 var（-_t、var（ -  h））#ffff、
    0 0 var（-_ c、＃000）;
  背景： 
    線形勾配（＃1095C1 0 0） 
    ボトム/100％var（-_ d、0）繰り返し。
  オーバーフロー：隠し;
  遷移：0.3s;
}
.hover-2：Hover {
  -_D：100％;
  -_T：0;
  -_ C：＃0000;
}

ここで私たちがしていることは、CSS text-shadowとbackgroundプロパティを組み合わせて、クールなホバー効果を作成することです。さらに、CSS変数を使用してコードを最適化することができます。

背景文法が奇妙に見える場合は、以前の投稿を読むことを強くお勧めします。次のホバー効果は、その投稿で詳述したアニメーションにも依存しています。 CSSのバックグラウンドスキルに精通していない限り、この記事を読み続ける前に、より多くの背景情報についてその記事を読むことをお勧めします。

以前の投稿では、1つの変数のみを使用してホバーエフェクトを作成する方法を示しました。ここでそうすることはできますか？

はい、絶対に！実際には、同じドライスイッチング技術を使用して、ホバリング時に値を切り替えるCSSカスタムプロパティのみを処理する必要があります。

 .hover-2 {
  /* 高い*/
  --H：1.2EM;

  ラインハイト：var（ -  h）;
  色：＃0000;
  テキストシャドウ： 
    0 var（--_ i、var（ -  h））#fff、
    0 0 RGB（0 0 0 / calc（var（-_ i、1） * 100％））;
  背景： 
    線形勾配（＃1095C1 0 0） 
    ボトム/100％calc（100％-var（--_ i、1） * 100％）繰り返し。
  オーバーフロー：隠し;
  遷移：0.3s;
}
.hover-2：Hover {
  -_ i：0;
}

ホバーエフェクト＃3

このホバー効果は、私たちが行った2つの効果の組み合わせにすぎません。前の投稿での2番目のホバー効果と、この投稿での最初のホバー効果です。

 .hover-3 {
  /* 色*/
  -C：＃1095C1;
  /* 高い*/
  --H：1.2EM;

  /*この記事の最初のホバー効果*/
  ラインハイト：var（ -  h）;  
  色：＃0000;
  オーバーフロー：隠し;
  テキストシャドウ： 
    0 calc（-1 * var（-_t、0em））var（ -  c）、 
    0 calc（var（ -  h） -  var（--_ t、0em））#fff;
  /*前の投稿の2番目のホバー効果*/
  背景： 
    線形勾配（var（ -  c）0 0）繰り返し 
    Calc（200％-VAR（-_ P、0％））100％ / 200％var（-_ p、.08em）;
  遷移：.3S var（-_ s、0s）、background-position .3s calc（.3s-var（--_ s、0s））;
}
.hover-3：Hover {
  -_ T：var（ -  h）;
  -_ P：100％;
  -_ s：.3s
}

私がしたことは、他の例から効果をコピーして貼り付け、変数名にマイナーな調整を行いました。それらが組み合わされると、クリーンなホバー効果を作成します！一見、この効果は複雑で達成が困難に見えるかもしれませんが、最終的には、2つの比較的単純な効果を1つに組み合わせるだけです。

完了した以前の最適化を検討する場合は、Dry Toggle変数テクノロジーを使用してコードを最適化する簡単なタスクである必要があります。

 .hover-3 {
  /* 色*/
  -C：＃1095C1;
  /* 高い*/
  --H：1.2EM;

  ラインハイト：var（ -  h）;  
  色：＃0000;
  オーバーフロー：隠し;
  テキストシャドウ： 
    0 calc（-1 * var（ -  h） * var（--_ i、0））var（ -  c）、 
    0 calc（var（ -  h） *（1-var（--_ i、0））#fff;
  背景： 
    線形勾配（var（ -  c）0 0）繰り返し
    calc（200％-var（-_ i、0） * 100％）100％ / 200％calc（100％ * var（-_ i、0）.08em）;
  遷移：.3S calc（var（-_ i、0） * .3s）、background-position .3s calc（.3s-calc（var（-_ i、0） * .3s））;
}
.hover-3：Hover {
  -_ i：1;
}

ホバーエフェクト＃4

このホバー効果は、2番目のホバー効果の改善です。まず、テキストレイヤーの1つを表示するためにclip-pathアニメーションを紹介し、次に移動しましょう。

何が起こっているのかをよりよく理解するためのより良い説明は次のとおりです。

最初は、実際のテキストのみが表示されるため、 overflow: hidden ：Hiddenに似たinset(0 0 0 0)を使用しました。ホバーでは、高さに等しい負の値で3番目の値（下のオフセットを表す）を更新して、下部に配置されたテキストレイヤーを表示します。

そこから、これをこの記事で作成した2番目のホバーエフェクトに追加できます。ここに私たちが得るものがあります。

私たちはどんどん近づいています！最初にclip-pathアニメーションを実行し、次に他のすべてを実行する必要があることに注意してください。これを行うには、 clip-pathを除き、ホバー上のすべてのプロパティに遅延を追加できます。

遷移：0.4S 0.4s、クリップパス0.4s;

マウスが移動すると、反対を行います。

遷移：0.4S、クリップパス0.4S 0.4S;

最後のタッチは、 box-shadowを追加して、青い長方形のスライド効果を作成することです。残念ながら、背景はデフォルトでコンテンツ領域にトリミングされるため、 backgroundこの効果を生成しません。同時に、 box-shadowコンテンツ領域を超えて行くことができます。

 .hover-4 {
  /* 色*/
  -C：＃1095C1;
  /* 高い*/
  --H：1.2EM;

  ラインハイト：var（ -  h）;
  色：＃0000;
  テキストシャドウ： 
    0 var（-_t、var（ -  h））#fff、
    0 0 var（-_ c、＃000）;
  Box-shadow：0 var（-_t、var（ -  h））var（ -  c）;
  クリップパス：挿入図（0 0 0 0）;
  背景：線形勾配（var（ -  c）0 0）0 var（--_ t、var（ -  h））no-repeat;
  遷移：0.4S、クリップパス0.4S 0.4S;
}
.hover-4：Hover {
  -_T：0;
  -_ C：＃0000;
  クリップパス：挿入図（0 0 calc（-1 * var（ -  h））0）;
  遷移：0.4S 0.4s、クリップパス0.4s;
}

box-shadowをよく見ると、 text-shadow内の白いテキスト層と同じ値があることがわかります。両方と同じように移動する必要があるため、これは論理的です。どちらも上部にスライドします。 box-shadowは要素の後ろにあり、 text-shadow上部にあります。

これは、レイヤーがどのように動くかを視覚化するためのいくつかの変更を備えたデモンストレーションです。

待ってください、背景構文は、2番目のホバー効果で使用されている構文とわずかに異なります！

良い視力！はい、同じ効果を生み出すために異なる背景手法を使用しています。サイズを0％から100％にアニメーション化する代わりに、位置をアニメーション化します。

勾配のサイズを指定しない場合、デフォルトでは幅と高さ全体を占めます。要素の高さ（ --h ）がわかっているため、 0 var(--h)から0 0までの位置を更新することにより、スライド効果を作成できます。

 .hover-4 {
  / * ... */
  背景：線形勾配（var（ -  c）0 0）0 var（--_ t、var（ -  h））no-repeat;
}
.hover-4：Hover {
  -_T：0;
}

background-sizeアニメーションを使用して同じ効果を得ることができますが、トリックのリストに別のトリックを追加しました！

デモでは、 inset(0 0 1px 0)も使用しました…なぜですか？

ここにピクセルやパーセンテージを追加または削除することがあり、見た目が良くないものはすべて完璧になります。この場合、下部に悪いラインが表示され、1pxを追加すると削除されます。

乾燥スイッチング変数の最適化はどうですか？

このタスクをお勧めします！これらの4つのホバーエフェクトと以前の記事を読んだ後、1​​つの変数のみを使用するようにコードを更新できるはずです。コメントであなたの試みを見たいです！

今あなた！

最後のホバー効果を共有させてください。これは、以前の効果の別のバージョンです。コードを見ずに実装する方法を知ることができますか？これは素晴らしい運動ですので、チートしないでください！

要約します

1つの要素と数行のCSSを使用するだけで、テキスト要素にかなり複雑なホバー効果を作成するのに十分であることを示す多くの例を見ました。擬似要素は必要ありません。複数のテクノロジーを組み合わせて、より複雑なアニメーションをより少ない努力で実現することもできます。

この記事でこれらの4つのテキストシャドウホバーエフェクトを超えているものを掘り下げることに興味がある場合は、500ホバーエフェクトのコレクションをご覧ください。ここでは、さまざまなテクニックを探ります。

以上がCSSテキストシャドウを使用する4クールなホバーエフェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。