悬停时更改fa图标的背景

Question

我想在像这个代码笔一样悬停的同时实现背景变化动画。我试着将手写笔转换为css，但仍然无法使其工作。我还尝试使用before和after伪元素，但仍然无法获得结果。我把背景改成了渐变，并试图改变背景位置来实现这一点，但也失败了。对不起，我是网络开发的新手。

.social-buttons {
position: absolute;
top: 100px;
left: 20px;
}
.social-buttons ul {
list-style: none;
}
.social-buttons ul li {
position: relative;
height: 50px;
width: 50px;
background-color: white;
border-radius: 10px;
margin: 10px 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.social-buttons ul li .fa {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
transition: all 0.1s ease-in;
}
.fa-instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-pinterest {
color: red;
}
.fa-facebook {
color: blue;
}
.fa-youtube {
color: red;
}
.social-buttons ul li:hover .fa {
font-size: 30px;
color: black;
}
.social-buttons ul li:hover .fa-instagram {
color: black;
background: none;
-webkit-text-fill-color: unset;
}

<script src="https://kit.fontawesome.com/fc692f1356.js" crossorigin="anonymous"></script>
<div class="social-buttons">
<ul>
<a href="#">
<li>
<i class="fa fa-instagram"></i>
</li>
</a>
<a href="#">
<li>
<i class="fa fa-pinterest"></i>
</li>
</a>
<a href="#">
<li>
<i class="fa fa-facebook"></i>
</li>
</a>
<a href="#">
<li>
<i class="fa fa-youtube"></i>
</li>
</a>
</ul>

Answer 1

因此，按照他们在该示例中的显示方式，我可能会在这种情况下推荐另一种方法，并使用transform和keyframe动画，而不是属性transition，这样你就可以从GPU中获得一点好处。

伪元素是一种很好的方式，cubic-bezier添加了弹性效果，只是我没有从你的例子中选择这个，因为它感觉像是一个跳跃的动画。然而，这应该会让你更接近你的目标。还将您的li更改为具有display: list-item的锚点，以及其他一些东西，以引导到一些WCAG。干杯

.social-buttons {
position: absolute;
top: 100px;
left: 20px;
}
.social-buttons ul {
list-style: none;
}
.social-buttons ul a {
display: list-item;
position: relative;
height: 50px;
width: 50px;
background-color: white;
border-radius: 10px;
margin: 10px 0px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
@keyframes topRight {
to { transform: rotate(-45deg) translate(0,0) };
}
.social-buttons ul a:before {
content: "";
display: block;
height: 150px;
width: 100px;
position: absolute;
top: -50px;
left: 0;
background-color: #0f0;
transform: rotate(-45deg) translate(-100px, -100px);
}
.social-buttons ul a:hover:before {
animation: topRight .5s cubic-bezier(.22,.68,0,1.71) forwards;
}
.social-buttons ul a .fa {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
transition: all 0.1s ease-in;
}
.fa-instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-pinterest {
color: red;
}
.fa-facebook {
color: blue;
}
.fa-youtube {
color: red;
}

<script src="https://kit.fontawesome.com/fc692f1356.js" crossorigin="anonymous"></script>

<div class="social-buttons">
<ul>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
<a href="#">
<i class="fa fa-pinterest"></i>
</a>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
<a href="#">
<i class="fa fa-youtube"></i>
</a>
</ul>