悬停时字体真棒渐变动画

Question

当鼠标指针悬停时，我希望颜色渐变动起来。

我尝试了以下代码，但没有用：

密码笔：https://codepen.io/anon/pen/exoQmp

我的代码有什么问题？

.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;
  }
}

我遵循并引用了按钮教程，但不适用于图标。

Answer 1

对background: linear-gradient(...进行动画处理基本上与尝试通过播放其位置来对背景图像进行动画处理相同，该动画处理最终会导致不必要的闪烁问题。

相反，您可以有两个背景，并可以通过opacity 进行悬停。 请注意，在示例中，我使用了mixin来重用它（插入:after伪元素并支持$content参数，因此您可以提供FontAwesome图标代码。）

在此处查看：https://codepen.io/cdtapay/pen/NommGN