javascript - 如何在不影响可见性的情况下为 Instagram Logo 添加颜色渐变？

Question

我想在不影响 Logo 可见性的情况下向 Instagram Logo 添加颜色渐变。

HTML

<div class="wrapper">
      <a href="http://www.facebook.com"><i class="fa fa-3x fa-facebook-square"></i></a>
      <a href="http://www.twitter.com"><i class="fa fa-3x fa-twitter-square"></i></a>
      <a href="http://www.instagram.com"><i class="fa fa-3x fa-instagram instagram"></i></a>
</div>

CSS

.wrapper {
  justify-content: center;
  align-items: center;
}
.wrapper i {
  padding: 10px;
  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
  transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
  color: #3b5998
}
.wrapper a:nth-child(2) {
  color: #1DA1F2;
}
.wrapper a:nth-child(3) {
  color: black;
}
.wrapper i:hover {
  margin-top: -3px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}

我正在创建一个网站，其中的社交媒体图标在悬停时会响应，并且 Logo 有一个图标。

Answer 1

使用径向渐变和background-clip

致谢 https://stackoverflow.com/a/49659118/8053274

.wrapper {
  justify-content: center;
  align-items: center;
}

.wrapper i {
  padding: 10px;
  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
  transition: all ease-in-out 150ms;
}

.wrapper a:nth-child(1) {
  color: #3b5998
}

.wrapper a:nth-child(2) {
  color: #1DA1F2;
}

.wrapper a:nth-child(3) {
  color: black;
}

.wrapper i:hover {
  margin-top: -3px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}

.fa-instagram {
  color: transparent;
  background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="wrapper">
  <a href="http://www.facebook.com"><i class="fa fa-3x fa-facebook-square"></i></a>
  <a href="http://www.twitter.com"><i class="fa fa-3x fa-twitter-square"></i></a>
  <a href="http://www.instagram.com"><i class="fa fa-3x fa-instagram instagram"></i></a>
</div>