gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:24:29 25 4
gpt4 key购买 nike

我想在不影响 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 有一个图标。

最佳答案

使用径向渐变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>

关于javascript - 如何在不影响可见性的情况下为 Instagram Logo 添加颜色渐变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56574105/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com