CSSを使用してli要素で左から右への色塗りつぶしアニメーションを実現するにはどうすればよいですか?

CSS で背景色を左から右に塗りつぶします

li 要素の背景を左から右に別の色で塗りつぶそうとしています。ホバーすると色が変わります。これを実現するには、線形グラデーションを利用して背景の位置をアニメーション化します。

コードの実装:

1. 赤と赤の 50% にわたる線形グラデーションを確立します。 50% 青。
2. 右側から始まるグラデーションを指定しますedge.
3. 要素の幅の 2 倍になるように背景を定義します (例: "background-size: 200% 100%;")。

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

4. ホバー時、背景の位置を左端に変更し、トランジションを適用します (例: "transition:all 2s easy;").

<code class="css">background-position: left;</code>

ベンダー プレフィックス:

ブラウザー間の互換性を確保したい場合は、ベンダー プレフィックスが必要になる場合があります。特定のベンダー プレフィックスに関するガイダンスについては、質問のコメントを参照してください。

追加オプション:

• 「カラー トランジション」を作成するには、グラデーションを次のように拡張します。幅を 300% にし、それに応じてトランジションの開始点と終了点を調整します。
• ライブについては、提供されている JS Fiddle リンクを参照してください。デモンストレーション。

以上がCSSを使用してli要素で左から右への色塗りつぶしアニメーションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。