Question

在页脚中，我有社交媒体图标（FB，Twitter等），这些图标是白色的，直到徘徊。一旦盘旋，它们就会变成各自的颜色（深蓝色FB，浅蓝色推特等）。

我的问题是Instagram图标是多彩的。有没有办法在悬停后将颜色更改为45度线性渐变？

或者这只适用于背景颜色（因为我使用font-awesome所以图标在技术上是文字或者我告诉我们）

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

Answer 1

请参阅以下代码段！有关-webkit-background-clip: text;和background-clip: text;的浏览器支持可能some concern。

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

悬停时的线性渐变？

1 个答案: