CSS transition心形图标过渡动画初始出现黑色背景的原因咨询

你遇到的黑色闪烁问题，本质是hover时才创建伪元素，伪元素初始未设置color: transparent，会先继承父元素的黑色，再过渡到透明+渐变效果；同时原span标签的空心爱心和hover时的伪元素实心爱心会短暂叠加，加重闪烁感。

调整CSS结构，让伪元素默认就存在，通过hover切换样式，确保过渡有完整的初始状态，同时避免图标叠加：

.heart {
  font-size: 2.5rem;
  padding-right: 2rem;
  color: transparent;
  position: relative;
  cursor: pointer;
}

/* 默认状态：黑色空心爱心 */
.heart::before {
  content: "\f004";
  font-family: "Font Awesome 6 Free";
  font-weight: 400; /* 对应空心爱心的权重 */
  color: #000;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease-in-out; /* 建议缩短过渡时长，0.5秒更自然 */
}

/* hover状态：渐变实心爱心 */
.heart:hover::before {
  font-weight: 900; /* 对应实心爱心的权重 */
  background-image: linear-gradient(#9356DC, #FF79DA);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<span class="heart"></span>

• 移除span标签的fa-regular fa-heart类，用伪元素统一控制两种状态，避免图标叠加
• 默认就定义.heart::before的样式，确保hover时是修改已有元素属性，而非创建新元素
• 给伪元素的font-weight、color等属性添加过渡，实现平滑切换
• 原span设置color: transparent，隐藏默认内容

这样修改后，hover时不会出现黑色闪烁，未hover时保持黑色空心轮廓，过渡效果自然流畅。

内容的提问来源于stack exchange，提问作者kevgiraultdev