バックグラウンドプロパティを使用するクールなホバーエフェクト

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

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

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

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

そのデモで職場での背景プロパティ、およびカスタムプロパティとcalc（）関数を使用する方法をさらに実行する方法を確認できます。これらすべてを組み合わせる方法を学ぶので、適切に最適化されたコードが残っています！

ホバーエフェクト＃1

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

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

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

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

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

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

背景画像：線形勾配（＃1095C1 0 0）;

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

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

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

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

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

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

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

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

近づいています！バックグラウンドの速記のサイズを定義するときに必須である左値（背景のポジション）を導入したことに注意してください。さらに、ホバー効果を達成するためにとにかくそれが必要です。

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

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

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

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

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

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

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

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

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

バックグラウンドポジションと-Pが同じ値をどのように使用しているかをご覧ください。これで、コードを3つの宣言に減らすことができます。

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

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

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

1つの変数を使用して、コードをわずかに更新して、逆の効果を達成できます。私たちが望んでいるのは、0％から100％ではなく100％から0％に行くことです。このように、calc（）を使用して表現できる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つのカスタムプロパティがありますが、異なる効果があります。

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

ホバーエフェクト＃2

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

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

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

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

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

勾配の幅は100％に等しいため、バックグラウンドポジションでパーセンテージ値を使用して移動することはできません。

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

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

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

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

コードを最適化する時が来ました。最初のホバー効果から学んだアイデアをとると、速記の特性を使用して、この作業を行うために宣言をより少なく書くことができます。

 .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を使用して値を表現します。サイズは.08EMから100％に変化し、ポジションは200％から100％に変化します

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

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

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

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

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

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

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

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

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

 .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に置き換えます。両方のケースで数学を実行し、それぞれの値を取得できます。その変数は、すべての値をホバーで一度に更新する「スイッチ」として見ることができます。

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

ホバーエフェクト＃3

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

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

これがCSSでどのように見えるかです：

 .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つの勾配があることです。位置の値は奇妙に見えるかもしれませんが、繰り返しますが、それはCSSのバックグラウンドポジションプロパティでのパーセンテージがどのように機能するかに関連しているため、ザラザラした詳細に入りたい場合は、スタックオーバーフローの回答を読むことを強くお勧めします。

それでは、最適化しましょう！あなたは今までにアイデアを得ています - 私たちは速記のプロパティ、カスタムプロパティ、および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;
}

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

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

スイッチ変数を使用して、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;
}

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

ホバーエフェクト＃4

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

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

最初は、ステップ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値を割り当てています。

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

以下の図は、各勾配の構成を示しています。

2番目の勾配（緑色で示されている）の場合、作成している円錐勾配内でそれを使用する高さを知る必要があることに注意してください。このため、要素の高さを設定するラインハイイトを追加し、残した円錐勾配値に対して同じ値を試します。

 .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つの同様のホバーエフェクトを見た後、最終的な最適化を単一のカスタムプロパティに引き下げることができるはずです。コメントセクションで作業を共有してください！賞品はありませんが、すべての人に利益をもたらすさまざまな実装やアイデアになるかもしれません！

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

まとめます

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

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

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