如何使用 CSS 悬停效果创建从左到右的背景颜色填充？

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

在 CSS3 中，可以使用过渡来增强悬停效果以创建动态视觉效果。一种常见的情况是在悬停时从左到右用不同的颜色填充元素的背景。要实现此目的：

第 1 步：使用线性渐变

利用线性渐变来建立背景颜色过渡。定义两种颜色，并在 50% 处进行明确划分（例如，红色在 50% 之前，蓝色在 50% 之后）。

第 2 步：缩放和定位渐变

将背景缩放为元素宽度的两倍和高度的 100%（例如，background-size: 200% 100%；）。将渐变定位到元素的右侧。

第 3 步：创建悬停过渡

悬停时，将背景位置修改为“左侧”。将此与过渡（例如，过渡：全部 2 秒缓和；）结合起来以动画化位置变化。

示例代码：

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

/* On hover */
background-position: left;</code>

可选增强功能:

要控制过渡的颜色，请将背景宽度增加到 300% 并微调渐变的开始和结束百分比（例如，开始为 34%，结束为 65%）。

浏览器支持：

考虑为过渡属性添加前缀以实现跨浏览器兼容性。

以上是如何使用 CSS 悬停效果创建从左到右的背景颜色填充？的详细内容。更多信息请关注PHP中文网其他相关文章！