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

在 CSS 中，您可以通过利用线性渐变和动画背景定位来创建迷人的悬停效果。这种方法使您能够在悬停时从左到右用新颜色填充元素的背景。

线性渐变和背景大小

关键是使用由两种颜色组成的线性渐变背景，并将背景大小设置为元素宽度的两倍。这允许您在两种颜色之间创建无缝过渡。

背景定位和动画

最初，将背景定位到右侧，从最左边的颜色开始。悬停时，将背景位置更改为左侧以显示最右侧的颜色。要使过渡逐渐进行，请添加过渡：所有 2s 轻松； property.

代码示例

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

自定义过渡

要控制过渡的起点和终点，请调整线性渐变的百分比。例如，下面是从元素宽度的 34% 过渡到 65% 的配置：

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

通过实施此技术，您可以轻松创建优雅且引人注目的悬停效果，从而增强 Web 应用程序的用户体验并增强设计的整体视觉吸引力。