しばらく前に、ジェフはクールなホバー効果に関する記事を書(shū)きました。この効果は、CSSの擬似要素、変換、および遷移の組み合わせに依存しています。多くのコメントは、バックグラウンドプロパティを使用して同じ効果を?qū)g行できることを示しています。ジェフはそれが彼の最初の考えであり、それも私が考えていたことであると述べました。私は彼が上陸した擬似要素が悪いと言っているのではありませんが、同じ効果を達(dá)成するための異なる方法を知ることは良いことにしかありません。

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

1. Cool Hover Effects That Use Background Properties ( you are here! )
2. CSSテキストシャドウを使用するクールなホバーエフェクト
3. バックグラウンドクリッピング、マスク、3Dを使用するクールなホバーエフェクト

この投稿では、そのホバー効果を再加工しますが、CSSバックグラウンドプロパティのみを使用する他のタイプのホバー効果にも拡張します。

そのデモで職場(chǎng)での背景プロパティ、およびカスタムプロパティとcalc（）関數(shù)を使用する方法をさらに実行する方法を確認(rèn)できます。これらすべてを組み合わせる方法を?qū)Wぶので、適切に最適化されたコードが殘っています！

ホバーエフェクト＃1

彼の記事でGeoffが詳述したものの複製である最初の効果から始めましょう。その効果を達(dá)成するために使用されるコードは次のとおりです。

 .hover-1 {
  背景：線形勾配（＃1095c1 0 0）var（ -  p、0） / var（ -  p、0）no-repeat;
  遷移：.4s、バックグラウンドポジション0S;
}
.hover-1：Hover {
  -P：100％;
  色：#fff;
}

色の遷移（オプション）を省略した場(chǎng)合、効果を達(dá)成するには3つのCSS宣言のみが必要です。おそらくコードがどれほど小さいかに驚くでしょうが、私たちがどのようにそこにたどり著いたかがわかります。

まず、シンプルなバックグラウンドサイズの遷移から始めましょう。

0 100％から100％100％の線形勾配のサイズをアニメーション化しています。つまり、幅は0から100％になり、背景自體は全高になります。これまでのところ複雑なものはありません。

最適化を始めましょう。最初にグラデーションを変換して、色を1回だけ使用します。

背景畫(huà)像：線形勾配（＃1095C1 0 0）;

構(gòu)文は少し奇妙に見(jiàn)えるかもしれませんが、ブラウザに1つの色が2つのカラーストップに適用されていることを伝えています。これでCSSの勾配を定義するのに十分です。両方のカラーストップは0であるため、ブラウザは最後の100％を自動(dòng)的に100％にし、同じ色で勾配を埋めます。ショートカット、ftw！

バックグラウンドサイズを使用すると、グラデーションがデフォルトではフルハイトであるため、高さを省略できます。バックグラウンドサイズからバックグラウンドサイズへの移行を行うことができます：100％。

 .hover-1 {
  背景畫(huà)像：線形勾配（＃1095C1 0 0）;
  バックグラウンドサイズ：0;
  バックグラウンドリピート：ノーリピート。
  遷移：.4S;
}
.hover-1：Hover {
  バックグラウンドサイズ：100％;
}

バックグラウンドサイズの繰り返しを避けるために、カスタムプロパティを紹介しましょう。

 .hover-1 {
  背景畫(huà)像：線形勾配（＃1095C1 0 0）;
  バックグラウンドサイズ：var（ -  p、0％）;
  バックグラウンドリピート：ノーリピート。
  遷移：.4S;
}
.hover-1：Hover {
  -P：100％;
}

-P最初は定義していないため、フォールバック値（當(dāng)社の場(chǎng)合は0％）が使用されます。ホバーでは、フォールバックの値（100％）を置き換える値を定義します。

次に、速記バージョンを使用してすべてのバックグラウンドプロパティを組み合わせて取得しましょう。

 .hover-1 {
  背景：線形勾配（＃1095c1 0 0）左 / var（ -  p、0％）繰り返し。
  遷移：.4S;
}
.hover-1：Hover {
  -P：100％;
}

近づいています！バックグラウンドの速記のサイズを定義するときに必須である左値（背景のポジション）を?qū)毪筏郡长趣俗⒁猡筏皮坤丹ぁ￥丹椁?、ホバー効果を達(dá)成するためにとにかくそれが必要です。

また、Hoverの位置を更新する必要があります。私たちは2つのステップでそれを行うことができます：

1. マウスホバーの右からサイズを増やします。
2. マウスの左からサイズを減らします。

これを行うには、ホバーのバックグラウンドポジションも更新する必要があります。

コードに2つのことを追加しました。

• ホバー上の右の背景位置値
• バックグラウンドポジションの0の遷移期間

これは、ホバーでは、背景のサイズが右側(cè)から増加するように、左から左から左から右にバックグラウンドポジションを変更することを意味します。次に、マウスカーソルがリンクを離れると、遷移が右から左に逆に再生され、左側(cè)からバックグラウンドのサイズが小さくなっているように見(jiàn)えます。私たちのホバー効果は完了です！

しかし、あなたは私たちには3つの宣言が必要であり、4つあると言いました。

それは本當(dāng)です、いいキャッチです。左右の値は、それぞれ0 0および100％0に変更できます。また、勾配はデフォルトではすでにフルハイトであるため、0と100％を使用することで得ることができます。

 .hover-1 {
  背景：線形勾配（＃1095c1 0 0）0 / var（ -  p、0％）繰り返し。
  遷移：.4s、バックグラウンドポジション0S;
}
.hover-1：Hover {
  -P：100％;
  バックグラウンドポジション：100％;
}

バックグラウンドポジションと-Pが同じ?jìng)帳颏嗓韦瑜Δ耸褂盲筏皮い毪颏从Eください。これで、コードを3つの宣言に減らすことができます。

 .hover-1 {
  背景：線形勾配（＃1095C1 0 0）var（ -  p、0％） / var（ -  p、0％）繰り返し。
  遷移：.4s、バックグラウンドポジション0S;
}
.hover-1：Hover {
  -P：100％;
}

カスタムプロパティ-Pは、背景位置とサイズの両方を定義しています。ホバーでは、両方を更新します。これは、カスタムプロパティが冗長(zhǎng)コードを削減し、プロパティの書(shū)き込みを複數(shù)回避けるのにどのように役立つかを示す完璧なユースケースです。カスタムプロパティを使用して設(shè)定を定義し、後者のみをHoverで更新します。

しかし、ジェフが説明した効果は、左から始まり、右で終わる反対を行うことです。同じ変數(shù)に頼ることができないと思われるとき、どうすればいいですか？

1つの変數(shù)を使用して、コードをわずかに更新して、逆の効果を達(dá)成できます。私たちが望んでいるのは、0％から100％ではなく100％から0％に行くことです。このように、calc（）を使用して表現(xiàn)できる100％の違いがあります。

 .hover-1 {
  背景：線形勾配（＃1095C1 0 0）calc（100％-var（ -  p、0％）） / var（ -  p、0％）No-Reepeat;
  遷移：.4s、バックグラウンドポジション0S;
}
.hover-1：Hover {
  -P：100％;
}

-Pは0％から100％に変わりますが、Calc（）のおかげで、背景の位置は100％から0％に変わります。

まだ3つの宣言と1つのカスタムプロパティがありますが、異なる効果があります。

次のホバーエフェクトに移動(dòng)する前に、おそらくあなたが気づいた重要なことを強(qiáng)調(diào)したいと思います。カスタムプロパティを扱う場(chǎng)合、ユニットのない0の代わりに0％（ユニットを使用して）使用しています。ユニットのゼロは、カスタムプロパティが単獨(dú)であるときに機(jī)能する場(chǎng)合がありますが、ユニットを明示的に定義する必要があるCALC（）內(nèi)で故障します。この癖を説明するために別の記事が必要かもしれませんが、カスタムプロパティを扱うときは常にユニットを追加することを忘れないでください。 StackOverFlow（こちらとこちら）に2つの回答があります。

ホバーエフェクト＃2

この効果のために、より複雑な遷移が必要です。何が起こっているのかを理解するために、ステップバイステップのイラストを見(jiàn)てみましょう。

最初に、背景ポジションの遷移に続いてバックグラウンドサイズの遷移があります。これをコードに翻訳しましょう。

 .hover-2 {
  背景畫(huà)像：線形勾配（＃1095C1 0 0）;
  バックグラウンドサイズ：100％.08em; /* .08EMは固定された高さです。必要に応じて変更します。 */
  バックグラウンドポジション： /* ??? */;
  バックグラウンドリピート：ノーリピート。
  トランジション：バックグラウンドサイズ.3、バックグラウンドポジション.3s .3s;
}
.hover-2：Hover {
  トランジション：バックグラウンドサイズ.3s .3s、バックグラウンドポジション.3s;
  バックグラウンドサイズ：100％100％;
  バックグラウンドポジション： /* ??? */;
}

2つの遷移値の使用に注意してください。ホバーでは、最初に位置を変更し、後でサイズを変更する必要があります。そのため、サイズに遅延を追加する必要があります。マウスアウトでは、反対を行います。

今の問(wèn)題は、バックグラウンドポジションにどのような値を使用するかということです。私たちはそれらを上に空白を殘しました。バックグラウンドサイズの値は些細(xì)なものですが、バックグラウンドポジションの値は些細(xì)なことではありません。そして、実際の構(gòu)成を維持すると、グラデーションを移動(dòng)できません。

勾配の幅は100％に等しいため、バックグラウンドポジションでパーセンテージ?jìng)帳蚴褂盲筏埔苿?dòng)することはできません。

バックグラウンドポジションで使用される値は、特に初めて使用する場(chǎng)合、常に痛みです。彼らの行動(dòng)は直感的ではありませんが、明確に定義されており、その背後にロジックを得ると理解しやすいです。なぜこのように機(jī)能するのかを完全に説明するために別の記事が必要だと思いますが、Stack Overflowで投稿した別の「長(zhǎng)い」説明があります。その回答を読むのに數(shù)分かかることをお?jiǎng)幛幛筏蓼?。後で感謝します！

トリックは、幅を100％とは異なるものに変更することです。 200％を使用しましょう。とにかくオーバーフローが隠されているため、背景が要素を超えることを心配していません。

 .hover-2 {
  背景畫(huà)像：線形勾配（＃1095C1 0 0）;
  バックグラウンドサイズ：200％.08em;
  バックグラウンドポジション：200％100％;
  バックグラウンドリピート：ノーリピート。
  トランジション：バックグラウンドサイズ.3、バックグラウンドポジション.3s .3s;
}
.hover-2：Hover {
  トランジション：バックグラウンドサイズ.3s .3s、バックグラウンドポジション.3s;
  バックグラウンドサイズ：200％100％;
  バックグラウンドポジション：100％100％;
}

そして、これが私たちが得るものです：

コードを最適化する時(shí)が來(lái)ました。最初のホバー効果から學(xué)んだアイデアをとると、速記の特性を使用して、この作業(yè)を行うために宣言をより少なく書(shū)くことができます。

 .hover-2 {
  背景： 
    線形勾配（＃1095C1 0 0）繰り返し
    var（ -  p、200％）100％ / 200％var（ -  p、.08em）;
  遷移：.3s var（ -  t、0s）、background-position .3s calc（.3s-var（ -  t、0s））;
}
.hover-2：Hover {
  -P：100％;
  -t：.3s;
}

Shorthandバージョンを使用してすべてのバックグラウンドプロパティを一緒に追加し、次に-Pを使用して値を表現(xiàn)します。サイズは.08EMから100％に変化し、ポジションは200％から100％に変化します

また、移行プロパティを最適化するために、別の変數(shù)-Tを使用しています。マウスホバーでは、.3S値に設(shè)定しています。これにより、次のようになります。

遷移：.3s .3s、バックグラウンドポジション.3s 0S;

マウスアウトでは、-Tは未定義であるため、フォールバック値が使用されます。

遷移：.3s 0s、バックグラウンドポジション.3s .3s;

移行にバックグラウンドサイズがあるべきではありませんか？

それは確かに私たちができるもう1つの最適化です。プロパティを指定しない場(chǎng)合、プロパティを「すべて」を意味するため、遷移はプロパティ（バックグラウンドサイズとバックグラウンドポジションを含む）に対して「すべて」で定義されます。次に、背景サイズ、次にバックグラウンドポジションのために定義することに似た背景ポジションのために再び定義されます。

「同様」は、何かが「同じ」だと言うこととは異なります。ホバーでより多くのプロパティを変更すると違いが表示されるため、最後の最適化は場(chǎng)合によっては不適切になる可能性があります。

コードを最適化し、1つのカスタムプロパティのみを使用できますか？

はい、できます！ Ana Tudorは、1つのカスタムプロパティが複數(shù)のプロパティを更新できる場(chǎng)所でドライスイッチングを作成する方法を説明する素晴らしい記事を共有しました。ここでは詳細(xì)については説明しませんが、私たちのコードは次のように修正できます。

 .hover-2 {
  背景： 
    線形勾配（＃1095C1 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-2：Hover {
  --i：1;
}

-iカスタムプロパティは最初は未定義であるため、フォールバック値0が使用されます。ただし、Hoverでは、0を1に置き換えます。両方のケースで數(shù)學(xué)を?qū)g行し、それぞれの値を取得できます。その変數(shù)は、すべての値をホバーで一度に更新する「スイッチ」として見(jiàn)ることができます。

繰り返しますが、かなりクールなホバー効果のために、3つの宣言に戻りました！

ホバーエフェクト＃3

この効果のために、1つではなく2つの勾配を使用します。複數(shù)の勾配を組み合わせることが、派手なホバーエフェクトを作成する別の方法であることがわかります。

これが私たちがしていることの図です：

これがCSSでどのように見(jiàn)えるかです：

 .hover-3 {
  背景イメージ：
    線形勾配（＃1095C1 0 0）、
    線形勾配（＃1095C1 0 0）;
  バックグラウンドリピート：ノーリピート。
  バックグラウンドサイズ：50％.08em;
  バックグラウンドポジション：
    -100％100％、
    200％0;
  トランジション：バックグラウンドサイズ.3、バックグラウンドポジション.3s .3s;
}
.hover-3：Hover {
  バックグラウンドサイズ：50％100％;
  バックグラウンドポジション：
    0 100％、
    100％0;  
  トランジション：バックグラウンドサイズ.3s .3s、バックグラウンドポジション.3s;
}

コードは、私たちがカバーした他のホバー効果とほぼ同じです。唯一の違いは、2つの異なる位置を持つ2つの勾配があることです。位置の値は奇妙に見(jiàn)えるかもしれませんが、繰り返しますが、それはCSSのバックグラウンドポジションプロパティでのパーセンテージがどのように機(jī)能するかに関連しているため、ザラザラした詳細(xì)に入りたい場(chǎng)合は、スタックオーバーフローの回答を読むことを強(qiáng)くお?jiǎng)幛幛筏蓼埂?/p>

それでは、最適化しましょう！あなたは今までにアイデアを得ています - 私たちは速記のプロパティ、カスタムプロパティ、およびcalc（）を使用して、物事を整理しています。

 .hover-3 {
  -C：繰り返し線形勾配（＃1095C1 0 0）;
  背景： 
    var（ -  c）calc（-100％var（ -  p、0％））100％ / 50％var（ -  p、.08em）、
    var（ -  c）calc（200％-var（ -  p、0％））0 /50％var（ -  p、.08em）;
  遷移：.3s var（ -  t、0s）、background-position .3s calc（.3s-var（ -  t、0s））;
}
.hover-3：Hover {
  -P：100％;
  -t：0.3s;
}

同じ勾配が両方の場(chǎng)所で使用されるため、勾配を定義する追加のカスタムプロパティを追加しました。

グラデーション間でギャップが表示されるのを防ぐため、バックグラウンドサイズでは50％ではなく、そのデモで50.1％を使用しています。また、同様の理由で1％をポジションに追加しました。

スイッチ変數(shù)を使用して、2番目の最適化を行いましょう。

 .hover-3 {
  -C：繰り返し線形勾配（＃1095C1 0 0）;
  背景： 
    var（ -  c）calc（-100％var（ -  i、0） * 100％）100％ / 50％calc（100％ * var（ -  i、0）.08em）、
    var（ -  c）calc（200％-var（ -  i、0） * 100％）0 /50％calc（100％ * var（ -  i、0）.08em）;
  遷移：.3s calc（var（ -  i、0） * .3s）、background-position .3s calc（.3s-var（ -  i、0） * .3s）;
}
.hover-3：Hover {
  --i：1;
}

ここでパターンを見(jiàn)始めていますか？私たちが作る効果が難しいことはそれほどではありません。これは、コード最適化の「最終ステップ」です。多くのプロパティを使用して詳細(xì)なコードを作成することから始めてから、簡(jiǎn)単なルール（たとえば、速記の使用、デフォルト値の削除、冗長(zhǎng)値の避けなど）に従って、可能な限り簡(jiǎn)素化します。

ホバーエフェクト＃4

私はこの最後の効果の難易度を上げますが、あなたは他の例から十分に知っています。

このホバー効果は、2つの円錐勾配とより多くの計(jì)算に依存しています。

最初は、ステップ1にゼロ寸法の両方の勾配があります。ステップ2でそれぞれのサイズを増やします。ステップ3に示すように、要素が完全にカバーされるまで幅を増やし続けます。その後、それらを下にスライドさせて位置を更新します。これはホバー効果の「魔法」の部分です。両方の勾配が同じ色を使用するため、ステップ4の位置を変更しても視覚的な違いはありませんが、ステップ5でマウスのサイズを縮小すると違いが表示されます。

ステップ2とステップ5を比較すると、別の傾向があることがわかります。それをコードに翻訳しましょう。

 .hover-4 {
  背景イメージ：
    conic-gradient（/ * ??? */）、
    conic-gradient（/ * ??? */）;
  バックグラウンドポジション：
    0 0、
    100％0;
  バックグラウンドサイズ：0％200％;
  バックグラウンドリピート：ノーリピート。
  遷移：バックグラウンドサイズ.4s、バックグラウンドポジション0S;
}
.hover-4：Hover {
  バックグラウンドサイズ： /* ??? */ 200％;
  バックグラウンドポジション：
    0 100％、
    100％100％;
}

ポジションはかなり明確です。 1つの勾配は左上（0 0）で始まり、左下（0 100％）で終了し、もう1つは右上（100％0）から始まり、右下（100％100％）で終了します。

背景位置とサイズの移行を使用してそれらを明らかにしています。バックグラウンドサイズの遷移値は必要です。以前と同様に、バックグラウンドポジションは即座に変更する必要があるため、移行期間に0S値を割り當(dāng)てています。

サイズの場(chǎng)合、どちらの勾配でも幅が0と2倍の要素の高さ（0％200％）が必要です。後でホバーでサイズがどのように変化するかを確認(rèn)します。最初に勾配構(gòu)成を定義しましょう。

以下の図は、各勾配の構(gòu)成を示しています。

2番目の勾配（緑色で示されている）の場(chǎng)合、作成している円錐勾配內(nèi)でそれを使用する高さを知る必要があることに注意してください。このため、要素の高さを設(shè)定するラインハイイトを追加し、殘した?jī)义F勾配値に対して同じ?jìng)帳蛟嚖筏蓼埂?/p>

 .hover-4 {
  -C：＃1095C1;
  Line-Height：1.2em;
  背景イメージ：
    conic-gradient（100％50％の-135degから、var（ -  c）90deg、＃0000 0）、
    conic-gradient（-135deg at 1.2em 50％、＃0000 90deg、var（ -  c）0）;
  バックグラウンドポジション：
    0 0、
    100％0;
  バックグラウンドサイズ：0％200％;
  バックグラウンドリピート：ノーリピート。
  遷移：バックグラウンドサイズ.4s、バックグラウンドポジション0S;
}
.hover-4：Hover {
  バックグラウンドサイズ： /* ??? */ 200％;
  バックグラウンドポジション：
    0 100％、
    100％100％;
}

私たちが殘した最後のことは、背景のサイズを把握することです。直感的には、各勾配が要素の幅の半分を占有する必要があると考えるかもしれませんが、それだけでは十分ではありません。

We get a gap equal to the height, so we actually need to do is increase the size of each gradient by half the height on hover for them to cover the whole element.

 .hover-4：Hover {
  バックグラウンドサイズ：calc（50％.6em）200％;
  バックグラウンドポジション：
    0 100％、
    100％100％;
}

以前の例のように、それらを最適化した後に得られるものは次のとおりです。

 .hover-4 {
  -C：＃1095C1;
  Line-Height：1.2em;
  背景：
    conic-gradient（-135deg at 100％50％、var（ -  c）90deg、＃0000 0） 
      0 var（ -  p、0％） / var（ -  s、0％）200％なし、繰り返し、
    conic-gradient（-135deg at 1.2em 50％、＃0000 90deg、var（ -  c）0） 
      100％var（ -  p、0％） / var（ -  s、0％）200％なし。
  遷移：.4s、バックグラウンドポジション0S;
}
.hover-4：Hover {
  -P：100％;
   -  s：calc（50％.6em）;
}

カスタムプロパティが1つしかないバージョンはどうですか？

私はあなたのためにそれを殘します！ 4つの同様のホバーエフェクトを見(jiàn)た後、最終的な最適化を単一のカスタムプロパティに引き下げることができるはずです。コメントセクションで作業(yè)を共有してください！賞品はありませんが、すべての人に利益をもたらすさまざまな実裝やアイデアになるかもしれません！

終了する前に、アナチューダーが調(diào)理した最後のホバー効果のバージョンを共有させてください。それは改善です！しかし、既知のバグのためにFirefoxのサポートがないことに注意してください。それでも、それはグラデーションをブレンドモードと組み合わせて、さらに涼しいホバーエフェクトを作成する方法を示す素晴らしいアイデアです。

まとめます

4つの超クールなホバーエフェクトを作成しました！そして、それらは異なる効果ですが、それらはすべて、CSSのバックグラウンドプロパティ、カスタムプロパティ、およびCalc（）を使用するのと同じアプローチを採(cǎi)用しています。さまざまな組み合わせにより、さまざまなバージョンを作成することができました。これらはすべて、クリーンで保守可能なコードを殘すのと同じ手法を使用しています。

いくつかのアイデアを取得したい場(chǎng)合、私は500（はい、500！）ホバーエフェクトのコレクションを作成しました。そのうち400は擬似要素なしで行われます。この記事で取り上げた4つは、氷山の一角にすぎません！

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