如何使用 CSS 懸停效果從左到右填滿背景顏色？

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

在CSS 中，您可以利用線性漸變和動畫背景定位來創造迷人的懸停效果。這種方法使您能夠在懸停時用新顏色從左到右填充元素的背景。

線性漸變和背景大小

關鍵是使用由兩種顏色組成的線性漸變背景，並將背景大小設為元素寬度的兩倍。這允許您在兩種顏色之間創建無縫過渡。

背景定位和動畫

最初，將背景定位到右側，從最左邊的顏色開始。懸停時，將背景位置變更為左側以顯示最右側的顏色。要使過渡逐漸進行，請添加過渡：所有2s 輕鬆； property.

代碼範例

<code class="css">div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}</code>

自訂過渡

自訂過渡

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

自訂過渡自訂轉換>控制過渡的起點和結束點，調整線性漸變的百分比。例如，以下是一個從元素寬度的34% 過渡到65% 的配置：透過實施此技術，您可以輕鬆創建優雅且引人注目的懸停效果，從而增強用戶體驗您的Web 應用程式並增強設計的整體視覺吸引力。

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