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

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

線性漸變和背景大小

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

背景定位和動畫

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

程式碼範例

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

自訂過渡

要控制過渡的起點和終點，請調整線性漸變的百分比。例如，以下是從元素寬度的 34% 過渡到 65% 的配置：

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

透過實施此技術，您可以輕鬆創建優雅且引人注目的懸停效果，從而增強Web 應用程式的使用者體驗並增強設計的整體視覺吸引力。