Html 更改悬停时fa图标的背景

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

。社交按钮{
位置：绝对位置；
顶部：100px；
左：20px；
}
.社交网站{
列表样式：无；
}
.社会福利署{
位置：相对位置；
高度：50px；
宽度：50px；
背景色：白色；
边界半径：10px；
利润率：10px 0px；
盒影：0.10px rgba（0,0,0,0.3）；
}
.ul li.fa{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：25px；
过渡：所有0.1秒都容易进入；
}
.fa instagram{
背景：径向梯度（30%107%，#fdf497 0%，#fdf497 5%，#fd5949 45%，#d6249f 60%，#285AEB 90%处的圆圈）；
-webkit背景剪辑：文本；
背景剪辑：文本；
-webkit文本填充颜色：透明；
}
皮涅斯特夫人{
颜色：红色；
}
.fa脸谱网{
颜色：蓝色；
}
.fa youtube{
颜色：红色；
}
.社交按钮ul li:hover.fa{
字体大小：30px；
颜色：黑色；
}
.社交按钮ul li:hover.fa instagram{
颜色：黑色；
背景：无；
-webkit文本填充颜色：未设置；
}

因此，根据该示例中的显示方式，我可能会在本例中推荐另一种方法，并使用带有

关键帧的
动画而不是属性
过渡
，从而从GPU中获得一些额外的功能

伪元素是一种很好的方法，
立方贝塞尔（cubic bezier）
添加了反弹效果，但我没有从您的示例中选取，因为它感觉像是一个急动的动画。然而，这会让你更接近你的目标。还将您的
li
更改为带有
display:list item
的锚，以及一些其他东西，以转向某些WCAG。干杯


。社交按钮{
位置：绝对位置；
顶部：100px；
左：20px；
}
.社交网站{
列表样式：无；
}
.社会责任{
显示：列表项；
位置：相对位置；
高度：50px；
宽度：50px；
背景色：白色；
边界半径：10px；
利润率：10px 0px；
溢出：隐藏；
盒影：0.10px rgba（0,0,0,0.3）；
}
@右上角的关键帧{
到{变换：旋转（-45度）平移（0,0）}；
}
a:以前{
内容：“；
显示：块；
高度：150像素；
宽度：100px；
位置：绝对位置；
顶部：-50px；
左：0；
背景色：#0f0；
变换：旋转（-45度）平移（-100px，-100px）；
}
.社交按钮ul a:悬停：在{
动画：右上角.5s立方贝塞尔（.22,68,0,1.71）向前；
}
.社交网站{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：25px；
过渡：所有0.1秒都容易进入；
}
.fa instagram{
背景：径向梯度（30%107%，#fdf497 0%，#fdf497 5%，#fd5949 45%，#d6249f 60%，#285AEB 90%处的圆圈）；
-webkit背景剪辑：文本；
背景剪辑：文本；
-webkit文本填充颜色：透明；
}
皮涅斯特夫人{
颜色：红色；
}
.fa脸谱网{
颜色：蓝色；
}
.fa youtube{
颜色：红色；
}


你在谈论悬停动画吗？是的，我想在悬停时实现背景变化动画。欢迎使用堆栈溢出！你的背景在哪里？你说你尝试了伪元素和背景渐变，但那不在你的CSS中。很抱歉我删除了它们，因为它们不起作用。由于我是新手，我认为我的方法是错误的。我认为人们在看到我的代码后会对我生气。谢谢你帮助我和我的代码做得更好。@yashthe不用担心，我们都去过那里。只要表现出努力，并在有机会的时候向前付出。如果你的问题得到了回答，请将其标记出来，以便将来的观众知道。欢迎来到SO；）为什么我的上两个悬停动画不起作用（将图标颜色更改为黑色，并增加图标的字体大小）@yasht我在底部的示例中留下的孤立css仍然应用于
li
，所以我猜你将css粘贴到了某个地方，它仍然在寻找选择器。我编辑了答案以删除它，再试一次。你能帮忙吗？我有个问题@克里斯