从左到右填充背景颜色CSS

Question

今天玩一些css3,主要是过渡.

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

我需要使用该属性吗？

-vendor-prefix transition

请问有谁可以给我一些指示.

谢谢

Answer 1

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

使用线性渐变(50%红色,50%蓝色)并告诉浏览器背景是元素宽度的2倍(宽度:200%,高度:100%),然后告诉它将背景放置在左侧.

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

在悬停时,将背景位置更改为right bottom和transition:all 2s ease;,位置将逐渐变化(背景位置更好linear)背景位置:右下角;

至于-vendor-prefix',请参阅您的问题的评论

额外的 如果你想在颜色上有一个"过渡",你可以使它的宽度为300%并使转换开始于34%(略大于1/3)并以65%结束(略小于2/3).

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

Answer 2

悬停上的单个css代码可以解决这个问题: box-shadow: inset 100px 0 0 0 #e0e0e0;

在我的小提琴中可以找到完整的演示: