从左到右填充背景颜色CSS

从左到右填充背景颜色CSS

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

使用线性渐变（红色为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%;