悬停时字体真棒渐变动画[重复]答案

【问题标题】：Font awesome gradient animation on hover [duplicate]悬停时字体真棒渐变动画[重复]
【发布时间】：2019-02-21 01:08:42
【问题描述】：

当一个很棒的图标字体悬停时，我希望颜色渐变动画。

我已尝试以下代码但无法正常工作：

密码笔：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;
  }
}

我遵循并参考了一个按钮教程，但不适用于图标。

【问题讨论】：

一方面，您的 CodePen 设置错误。您已经编写了SCSS，但在您的示例中没有启用它。

标签： css font-awesome

【解决方案1】：

为background: linear-gradient(... 设置动画基本上与通过调整背景图像的位置来设置其动画效果基本相同，后者通常会导致不必要的闪烁问题。

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

在这里查看：https://codepen.io/cdtapay/pen/NommGN

【讨论】：