html - 悬停时如何将过渡动画添加到渐变文本背景？

Question

这个问题在这里已经有了答案:

Use CSS3 transitions with gradient backgrounds (18 个回答)

Animating Linear Gradient using CSS (5 个回答)

关闭 3 个月前。

本帖已编辑提交审核3个月前未能重新打开帖子:

原始关闭原因未解决

如何在悬停时将动画从纯色添加到背景渐变色？可能从左到右悬停时？

我有这个示例代码，但是当鼠标悬停时，更改颜色太快了。

我尝试过使用这些引用资料:

Use CSS3 transitions with gradient backgrounds

Animating Linear Gradient using CSS

但似乎无法弄清楚如何为悬停提供最简单的方法。其他引用资料说在悬停时添加伪元素，但使用它时似乎有点复杂。只是想在为渐变文本设置动画时使用悬停元素。

如何使用这些类型的渐变文本颜色添加过渡？

示例代码:

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:all 0.4s ease-in-out;
}

.hover-grad-txt:hover {
  background-image:linear-gradient(to right, #01A5F8, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<span class="hover-grad-txt">Spear</span>

Answer 1

要对其进行动画处理，而不是尝试对渐变进行动画处理，您可以对其位置进行动画处理。

让我们为您的背景使用新的线性渐变。
它会从纯色变为渐变色渐变中的第一种颜色，然后它将成为渐变中第二种颜色的渐变。

类似这样的:
background-image:linear-gradient(向右, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);

然后你调整大小只看到纯色:
背景尺寸:300% 100%;

它的位置:
背景位置:左上角；

悬停时您需要做的就是移动它:
背景位置:左上角100%；

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  background-position: top left;
  transition:all 1s ease-in-out;
}

.hover-grad-txt:hover {
  background-position: top left 100%;
}

<span class="hover-grad-txt">Spear</span>