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

使用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中文網其他相關文章！