从左到右填充背景颜色 CSS

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

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

我需要使用该房产吗

-vendor-prefix transition 

请任何人给我一些关于实现这一目标的指示。

Thanks

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

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

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

悬停时，将背景位置更改为left与transition:all 2s ease;，位置会逐渐改变（这样更好linear tough)

background-position: left;

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

至于-供应商前缀是的，请参阅对您的问题的评论

extra:

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

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

Demo:

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>