使用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>
以上是如何使用 CSS 懸停效果從左到右填滿背景顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!