悬停时从左到右平滑更改颜色答案

【问题标题】：Change color smoothly from left to right on hover悬停时从左到右平滑更改颜色
【发布时间】：2016-09-30 23:05:29
【问题描述】：

这是我的简单代码：

li::after {
  height: 2px;
  display: block;
  background: rgb(195, 195, 195);
  border-right: 1px white;
  content: '';
}


li:hover:after {
   position: relative;
   transition: 3s ease;
   height: 2px;
   display: block;
   background: rgb(34, 130, 193);
   border-right: 1px white;
   content: '';
}

现在我的目标是让线条从左到右平滑地改变颜色。但我写它的方式只是平滑地改变颜色。我想给它一个方向有什么简单的方法吗？

谢谢。

编辑：我正在寻找像 this 这样的行为。只是为了给您一个印象。

【问题讨论】：

标签： css animation transition

【解决方案1】：

是 linear-gradient(color1, color2) 你在找什么？

http://www.w3schools.com/css/css3_gradients.asp

【讨论】：

我认为没有。请参阅编辑中的链接。
atm 似乎不可能在渐变上进行过渡。您可以通过转换辅助元素的不透明度来实现它。我更新了你的小提琴作为例子：jsfiddle.net/0ou3o9rn/23