从左到右填充背景颜色CSS [英] Fill background color left to right CSS

问题描述

今天有一些css3的游戏，转换主要是

Having a play around with some css3 today, transitions mainly.

我想实现的是，当悬停一个li元素的背景将填充从左到右边用不同的颜色，理想情况下，我想能够填补一半或一路。我开始了一个 jsfiddle

What i would like to achieve is that upon hover of an li element the background will fill from left to right with a different colour, ideally i would like to be able to fill half way or all the way.. I have started a jsfiddle

我需要使用属性

-vendor-prefix transition 

任何人都可以给我一些实现这一点的指示。

Could anyone give me some pointers on achieving this please.

感谢

推荐答案

你需要做的事情是使用线性渐变作为背景，动画背景位置。在代码中：

The thing you will need to do here is use a linear gradient as background and animate the background position. In code:

使用线性渐变（50％红色，50％蓝色），并告诉浏览器背景比elments宽度大2倍（宽度：200％ ，height：100％），然后告诉它将背景定位。

Use a linear gradient (50% red, 50% blue) and tell the browser that background is 2 times larger than the elments width (width:200%, height:100%),then tell it to position the background left.

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

在悬停时，将背景位置更改为右下角和 transition：all 2s ease; ，位置会改变gradualy（更好的线性 b $ b background-position：right bottom;

On hover, change the background position to right bottom and with transition:all 2s ease;, the position will change gradualy (it's nicer with linear tough) background-position:right bottom;

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

至于-vendor-prefix，请参阅您的问题的意见

As for the -vendor-prefix'es, see the comments to your question

extra
如果你想在颜色上有一个transition，你可以使它的宽度为300％，并从34开始过渡％（大于1/3），以65％（小于2/3）结束。

extra if you want to have a "transition" in the color, you can make it 300% width and make the transition start at 34% (a bit more than 1/3) and end at 65% (a bit less than 2/3).

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

这篇关于从左到右填充背景颜色CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！