CSS ホバー効果を使用して左から右への背景色の塗りつぶしを作成する方法

CSS を使用した左から右への背景色の塗りつぶしの作成

CSS3 では、トランジションを使用してホバー効果を強化し、動的な視覚効果を作成できます。 。一般的なシナリオの 1 つは、ホバー時に要素の背景を左から右に異なる色で塗りつぶすことです。これを実現するには:

ステップ 1: 線形グラデーションを使用する

線形グラデーションを使用して、背景色の遷移を確立します。 50% で明確に分けて 2 色を定義します (例: 50% の前に赤、50% の後に青)。

ステップ 2: グラデーションのスケールと位置

要素の幅の 2 倍、高さ 100% になるように背景を拡大縮小します (例、background-size: 200% 100%;)。要素の右側にグラデーションを配置します。

ステップ 3: ホバー トランジションを作成します

ホバー時に、背景の位置を「左」に変更します。これをトランジション（例：transition: all 2s easy;）と組み合わせて、位置の変化をアニメーション化します。

コード例:

<code class="css">background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

/* On hover */
background-position: left;</code>

オプションの拡張機能:

トランジションの色を制御するには、背景の幅を 300% に増やし、グラデーションの開始と終了のパーセンテージを微調整します (例: 開始は 34%、終了は 65%)。

ブラウザのサポート:

ブラウザ間の互換性のために、transition プロパティにプレフィックスを付けることを検討してください。

以上がCSS ホバー効果を使用して左から右への背景色の塗りつぶしを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。