如何实现白色文本到渐变动画的平滑过渡？（-webkit-text-fill-color不支持transition）

当然可以实现，核心思路是绕开-webkit-text-fill-color不支持过渡的限制，用层叠元素的透明度过渡或背景属性动画模拟平滑切换效果，下面提供两种可行方案：

方案一：伪元素叠加过渡 #

给文本容器添加伪元素承载渐变文本效果，初始隐藏，点击按钮时通过过渡伪元素和原文本的透明度实现平滑切换：

CSS 代码 #

/* 文本容器相对定位，承载原文本与伪元素 */
.gradient-text-wrap {
  position: relative;
  font-size: 2rem;
  /* 原文本默认白色 */
  color: #ffffff;
  transition: opacity 0.4s ease;
}

/* 伪元素承载渐变文本，初始透明 */
.gradient-text-wrap::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* 自定义渐变背景 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 激活状态：伪元素显示，原文本隐藏 */
.gradient-text-wrap.active::before {
  opacity: 1;
}
.gradient-text-wrap.active {
  opacity: 0;
}

HTML 代码 #

<div class="gradient-text-wrap" data-text="这是一段测试文本">这是一段测试文本</div>
<button onclick="document.querySelector('.gradient-text-wrap').classList.toggle('active')">切换渐变效果</button>

方案二：背景渐变+混合模式过渡 #

利用混合模式让文本颜色与容器背景交互，通过过渡背景尺寸实现切换：

CSS 代码 #

.gradient-text-wrap {
  font-size: 2rem;
  color: #ffffff;
  /* 初始背景尺寸为0，不显示渐变 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 0 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  transition: background-size 0.4s ease;
}

.gradient-text-wrap.active {
  /* 展开背景尺寸，显示渐变 */
  background-size: 100% 100%;
  color: transparent;
}

说明 #

两种方案都避开了直接过渡-webkit-text-fill-color的限制，通过支持过渡的属性（opacity、background-size）实现平滑动画。方案一过渡效果更直观，方案二无需额外伪元素，代码更简洁。

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