ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用してli要素で左から右への色塗りつぶしアニメーションを実現するにはどうすればよいですか?

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

DDD
DDDオリジナル
2024-11-02 21:15:301004ブラウズ

How to achieve a left-to-right color fill animation on an li element using CSS?

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>
  1. ホバー時、背景の位置を左端に変更し、トランジションを適用します (例: "transition:all 2s easy;").
<code class="css">background-position: left;</code>

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

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

追加オプション:

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。