如何使用 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中文网其他相关文章！