移动图标的渐变颜色？答案

【问题标题】：Moving gradient colors for icons?移动图标的渐变颜色？
【发布时间】：2022-01-20 09:12:02
【问题描述】：

我可以像这样为文本生成移动渐变颜色：

a {
  &:hover {
    background: linear-gradient(-45deg, green, yellow, red, blue);
    background-size: 200% 200%;
    animation: gradient 2s ease infinite;
    color: transparent;
    -webkit-background-clip: text;
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

现在我有一个移动的渐变颜色效果（遗憾的是在屏幕截图中看不到它的移动）：

可以使用color 属性更改Font-Awesome 图标颜色，这会影响文本，但-webkit-background-clip: text 似乎对图标没有影响。

图标示例：

<fa class="icon" :icon="[ 'fa', 'envelope' ]" size="1x"></fa>

有什么办法吗？

【问题讨论】：

标签： html css vue.js font-awesome vuejs3

【解决方案1】：

.icn{
  font-size: 100px;
}

.color-icon:hover  {
    background: linear-gradient(-45deg, green, yellow, red, blue);
    background-size: 200% 200%;
    animation: gradient 2s ease infinite;
    color: transparent;
    -webkit-background-clip: text;
}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />

<i  class="fas fa-envelope icn color-icon"></i>

【讨论】：