使用CSS 實現懸停時從左到右的背景顏色填充
實現懸停時從左到右的背景顏色填充在元素上,採用線性漸層和過渡。首先在 50% 標記處配置具有兩種顏色的線性漸變,例如紅色和藍色。然後,將漸層設定為位於右側,並將元素的大小相對於其寬度和高度加倍(例如 200%)。
當元素懸停在上方時,將背景位置改為「左邊」。合併「過渡:全 2 輕鬆;」應用平滑過渡。
對於需要供應商前綴的瀏覽器,請參閱初始問題下的註解。
其他自訂
建立顏色過渡,將漸變寬度增加到300% 並調整開始(例如34%)和結束(例如65%) 相應地定位。
範例:
<code class="css">div { font: 22px Arial; display: inline-block; padding: 1em 2em; text-align: center; color: white; background: red; /* default color */ /* Linear gradient and initial position */ background: linear-gradient(to left, salmon 50%, lightblue 50%) right; background-size: 200%; transition: .5s ease-out; } div:hover { background-position: left; }</code>
HTML:
<code class="html"><div>Hover me</div></code>
以上是如何使用 CSS 建立懸停時從左到右的背景顏色填充?的詳細內容。更多資訊請關注PHP中文網其他相關文章!