悬停时的线性渐变？

Question

在页脚中，我有社交媒体图标（FB、Twitter 等），这些图标在悬停之前都是白色的。一旦悬停，它们就会变成各自的颜色（深蓝色 FB、浅蓝色 twitter 等）。

我的问题是 Instagram 图标是多色的。有没有什么办法可以在鼠标悬停后将颜色变为 45 度线性渐变？

或者这是否仅适用于背景颜色（因为我使用的字体很棒，所以图标在技术上是文本或者我被告知）

我还阅读过过渡不支持线性渐变，因为悬停是一种效果，这也适用于它吗？

Answer 1

看下面的代码sn-p！可能有some concern关于-webkit-background-clip: text;和background-clip: text;的浏览器支持。

.fb-gradient:hover css 段在悬停时实现文本渐变。

.instagram:hover css 段在悬停时实现instagram colors。

.icon-container {
  background-color: #BBB;
  font-size:72px;
  float: left;
}
.icon {
  color: #FFF;
  margin: 3px;
}

.fb-gradient:hover {
  background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #3b5998), color-stop(1, #fff));
  background-image: gradient( linear, left top, right bottom, color-stop(0, #3b5998), color-stop(1, #fff) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.instagram:hover { 
  background: #f09433; 
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-container">
  <i class="fa fa-facebook icon fb-gradient" aria-hidden="true"></i>
  <i class="fa fa-instagram icon instagram" aria-hidden="true"></i>
</div>