如何使用CSS在li元素上實現從左到右的顏色填充動畫？

使用CSS 從左到右填充背景顏色

您試圖使li 元素的背景從左到右填充不同的顏色懸停時的顏色。為了實現這一點，您將利用線性漸變並對背景位置進行動畫處理。

程式碼實作：

1. 建立一個跨越 50% 紅色和 50% 紅色的線性漸變50% 藍色。
2. 指定從右邊緣開始的漸層。
3. 將背景定義為元素寬度的兩倍（例如，「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 escape;」）。

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

供應商前綴：

如果您想確保跨瀏覽器相容性，則可能需要供應商前綴。請參閱問題中的評論，以取得特定供應商前綴的指導。

其他選項：

• 要創建“顏色過渡”，請將漸變擴展到300% 寬度並相應地調整過渡起點和終點。
• 請參閱提供的 JS Fiddle 連結進行現場示範。

以上是如何使用CSS在li元素上實現從左到右的顏色填充動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！