如何使用 CSS3 在懸停時從左到右填充 LI 元素的背景顏色？

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

問：我正在嘗試創建一種效果，其中 li 元素的背景顏色從左到右填充徘徊。如何使用 CSS3 實現此目的？

A：利用線性漸層作為元素的背景並為其位置設定動畫。代碼如下：

<code class="css">/* Set up the background gradient (red to blue) */
background: linear-gradient(to left, red 50%, blue 50%) right;

/* Make the background twice the size of the element */
background-size: 200% 100%;

/* Position the background to the right */
background-position: right;</code>

懸停時，將背景位置變更為左側以填滿元素。您可以使用transition: all 2s escape;來新增平滑過渡。

<code class="css">/* On hover, change the background position to the left */
background-position: left;</code>

示範：

<code class="html"><li>Hover me to fill the background</li></code>

<code class="css">li {
  display: inline-block;
  padding: 1em;
  background: linear-gradient(to left, red 50%, blue 50%) right;
  background-size: 200% 100%;
  background-position: right;
  transition: all 2s ease;
}

li:hover {
  background-position: left;
}</code>

以上是如何使用 CSS3 在懸停時從左到右填充 LI 元素的背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！