css - 悬停时线性渐变？

Question

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

我的问题是 Instagram 图标是彩色的。一旦悬停，有什么方法可以将颜色更改为 45 度线性渐变？

或者这是否只适用于背景颜色(因为我使用的是超棒的字体，所以图标在技术上是文本，或者有人告诉我)

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

Answer 1

请看下面的代码片段!可能有 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>