从左到右填充背景颜色CSS

Question

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

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

我需要使用房产吗

-vendor-prefix transition

任何人都可以给我一些有关实现这一目标的指示。

谢谢

Answer 1

您将需要在此处执行的操作是使用线性渐变作为背景并为背景位置设置动画。在代码中：

使用线性渐变（红色为50％，蓝色为50％），并告诉浏览器背景是元素宽度（宽度：200％，高度：100％）的2倍，然后告诉它将背景左移。

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

悬停时，将背景位置更改为rightbottom和transition:all2sease;，位置将逐渐更改（在linear强硬情况下更好）background-position：right bottom;

至于-vendor-prefix’s，请参阅您的问题的注释

额外 如果您希望颜色具有“过渡”效果，则可以使其宽度为300％，并以34％（稍微大于1/3）开始过渡，然后以65％（小于2 / 3）。

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