ホバーで移行するアニメーションの背景ストライプ

cssbackground-size属性を使用してクールなバックグラウンドストライプを作成する方法は？この記事では、CSSグラデーション、ブレンドモード、background-sizeプロパティでマウスオーバーするときに、背景ストライプの遷移の視覚効果を達成する方法を示すケースを共有します。

通常、background-size: coverを使用して、背景画像に要素全体を埋めるようにします。しかし、このケースには、より高度なバックグラウンドサイズの制御が必要です。マウスがホーバーするときに移行する背景ストライプ。効果は次のとおりです（マウスを次の領域にホバリングしてください）：

（ここに動的効果の実証をここに挿入する必要があります。これは元のテキストと一致しています）

この効果を達成するための鍵は、勾配モードとブレンドモードを巧みに使用することです。シンプルなHTML構造から始めましょう：

<div></div>

最初のCSSスタイル：

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

背景ストライプを作成

CSS線形勾配を使用してストライプを作成できます。ストライプの幅が不均一になり、遷移効果の必要性があるため、繰り返し勾配を直接使用することはできません。ここでは、5つの線形勾配の背景を重ねてコンテナの右上隅に配置することにより、5つのストライプをシミュレートします。

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

コードを簡素化するには、カスタムプロパティを使用できます。

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

はグラデーションを意味し、

はストライプの垂直オフセットを制御します。現在、線形勾配は純粋な黒に設定されています。これは、その後のマスキングとブレンド効果のためです。背景が繰り返しタイルをとらないようにするには、--gt：--nを設定する必要があります background-repeat: no-repeat;

ストライプのサイズと間隔を調整します

div {
  /* ... */
  background-repeat: no-repeat;
}

現在のストライプは重複しており、見ることはほとんど不可能です。

属性を使用して、ストライプの幅と高さを設定する必要があります。

属性は二重価値構文をサポートしており、それぞれ幅と高さを設定できます。次のコードは、高さのデフォルト値を使用して、各ストライプの幅を設定します。 background-size background-size高さはautoであるため、ストライプは互いに覆われます。二重値の構文を使用して同じ高さを設定する必要があります：

div {
  /* ... */
  background-size: 60%, 90%, 70%, 40%, 10%;
}

auto マスクとブレンドモード

div {
  /* ... */
  background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n);
}

背景色を白に変更します：

div {
  --h: calc(var(--n) - 5px);
  /* ... */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

マスキングとブレンドの効果を実現するために、親の容器に

を包み、新しいものを追加します。

CSSグリッドを使用したレイアウト

レイアウト：

div {
  /* ... */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* ... */
}

最初の<div>にグラデーション色を適用し、2番目の<code><div>に以前のストライプスタイルを適用し、：<pre class="brush:php;toolbar:false"><section> &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; </section></pre>を使用して画面ブレンドモードを実装します <p> </p>マウスホバーエフェクト<pre class="brush:php;toolbar:false">section { display: grid; align-items: center; justify-items: center; width: 500px; height: 500px; } section &gt; div { width: inherit; height: inherit; grid-area: 1 / 1; }</pre> <p>最後に、マウスオーバー効果を追加して、ストライプ幅をコンテナの全幅に拡張します。 <code><div> <code><div>最終効果は最初に表示されます。 より良いユーザーエクスペリエンスのために、さまざまなユーザーの好みを満たすためにスポーツ効果の設定を減らすことを検討することをお勧めします。 <code>mix-blend-mode: screen;

この方法は、優れた保守性とカスタマイズであり、ストライプの高さ、色、方向を簡単に変更できます。

このケースが、CSS属性をよりよく理解し、適用するのに役立つことを願っています。他の実装方法がある場合は、コメントセクションで共有してください！ background-size