从左到右填充背景颜色 CSS

Question

今天玩了一些css3，主要是过渡。

我想要实现的是，在 li 元素悬停时，背景将从左到右填充不同的颜色，理想情况下，我希望能够填充一半或全部。我已经开始了一个 jsfiddle

我需要使用该物业吗

-vendor-prefix transition

谁能给我一些关于实现这一目标的指示。

谢谢

原文由 Richlewis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在这里做的是使用线性渐变作为背景并为背景位置设置动画。在代码中：

使用线性渐变（50% 红色，50% 蓝色）并告诉浏览器背景是元素宽度（宽度：200%，高度：100%）的 2 倍，然后告诉它将背景定位在右侧。

 background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

悬停时，将背景位置更改为 left 并使用 transition:all 2s ease; ，位置会逐渐改变（使用 linear 会更好）

 background-position: left;

http://jsfiddle.net/75Umu/3/

至于 -vendor-prefix ‘es，请参阅您的问题的评论

_额外_：

如果您希望在颜色中进行“过渡”，您可以将其设置为 300% 宽度，并使过渡从 34%（略大于 1/3）开始并以 65%（略小于 2/3）结束）。

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

演示：

 div {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: red; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
div:hover {
    background-position: left;
}

 <div>Hover me</div>

原文由 beardhatcode 发布，翻译遵循 CC BY-SA 4.0 许可协议