ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用してli要素で左から右への色塗りつぶしアニメーションを実現するにはどうすればよいですか?
CSS で背景色を左から右に塗りつぶします
li 要素の背景を左から右に別の色で塗りつぶそうとしています。ホバーすると色が変わります。これを実現するには、線形グラデーションを利用して背景の位置をアニメーション化します。
コードの実装:
<code class="css">background: linear-gradient(to left, red 50%, blue 50%) right; background-size: 200% 100%;</code>
<code class="css">background-position: left;</code>
ベンダー プレフィックス:
ブラウザー間の互換性を確保したい場合は、ベンダー プレフィックスが必要になる場合があります。特定のベンダー プレフィックスに関するガイダンスについては、質問のコメントを参照してください。
追加オプション:
以上がCSSを使用してli要素で左から右への色塗りつぶしアニメーションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。