如何使用 CSS 懸停效果創建從左到右的背景顏色填充？

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

在CSS3 中，可以使用過渡來增強懸停效果以創建動態視覺效果。常見的情況是在懸停時從左到右用不同的顏色填充元素的背景。要實現此目的：

第 1 步：使用線性漸變

利用線性漸變來建立背景顏色過渡。定義兩種顏色，並在 50% 處進行明確劃分（例如，紅色在 50% 之前，藍色在 50% 之後）。

第2 步：縮放和定位漸變

將背景縮放為元素寬度的兩倍和高度的100%（例如，background-size: 200% 100 %；）。將漸層定位到元素的右側。

第 3 步：建立懸停過渡

懸停時，將背景位置修改為「左側」。將此與過渡（例如，過渡：全部 2 秒緩和；）結合起來以動畫化位置變化。

範例程式碼：

<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%）。

瀏覽器支援：

考慮為過渡屬性添加前綴以實現跨瀏覽器相容性。

以上是如何使用 CSS 懸停效果創建從左到右的背景顏色填充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！