如何使用CSS在li元素上实现从左到右的颜色填充动画？

使用 CSS 从左到右填充背景颜色

您试图使 li 元素的背景从左到右填充不同的颜色悬停时的颜色。为了实现这一点，您将利用线性渐变并对背景位置进行动画处理。

代码实现：

1. 建立一个跨越 50% 红色和 50% 红色的线性渐变50% 蓝色。
2. 指定从右边缘开始的渐变。
3. 将背景定义为元素宽度的两倍（例如，“background-size: 200% 100%;”）。

<code class="css">background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;</code>

4. 悬停时，将背景位置修改到左边缘，并应用过渡（例如，“transition:all 2s escape;”）。

<code class="css">background-position: left;</code>

供应商前缀：

如果您想确保跨浏览器兼容性，则可能需要供应商前缀。请参阅问题中的评论，获取有关特定供应商前缀的指导。

其他选项：

• 要创建“颜色过渡”，请将渐变扩展到300% 宽度并相应地调整过渡起点和终点。
• 请参阅提供的 JS Fiddle 链接进行现场演示。

以上是如何使用CSS在li元素上实现从左到右的颜色填充动画？的详细内容。更多信息请关注PHP中文网其他相关文章！