Css 悬停时的字体渐变动画

当图标字体悬停时，我希望颜色渐变设置动画

我尝试了以下代码，但不起作用：

代码笔：

我的代码有什么问题

.awesome-gradient {

    background: linear-gradient(-45deg, red, blue);
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

  &:hover {
  animation: gradient 10s ease infinite;
  }
}

@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

---

我遵循并引用了一个按钮教程，但没有应用于图标。

设置背景动画：线性渐变（…基本上与尝试通过播放背景图像的位置来设置背景图像动画相同，这通常会导致不必要的闪烁问题

相反，您可以有两个背景，并通过

不透明度在悬停时交换它们。
注意，在这个示例中，我使用了一个mixin来重用它（在

伪元素之后插入一个

：并支持一个
$content
参数，以便提供图标代码）

在此处查看：
首先，您的代码笔设置错误。您已经编写了
scs
，但在示例中没有启用它。