白色背景下实现文字内部渐变动画的技术求助

核心问题出在文字颜色设置和混合模式、遮罩逻辑上，以下是调整后的完整方案：

步骤1：简化并重构HTML结构 #

把文字和动画容器明确分离，避免结构混乱：

<h1>
  Make it
  <span id="elite">
    <span class="text">Elite</span>
    <span class="pops">
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
      <span class="pop"></span>
    </span>
  </span>
</h1>

步骤2：调整CSS核心逻辑 #

关键修改点： #

1. 让渐变文字正确显示：把文字颜色设为transparent，才能让background-clip: text的渐变透出来（原来的color: white会遮挡渐变，只有黑色背景下靠混合模式才勉强显示）。
2. 用遮罩限制动画范围：通过动态生成的文字遮罩，让脉冲动画只在文字区域内显示，彻底摆脱背景色的影响。
3. 替换混合模式：把multiply/darken改成overlay，让彩色脉冲和渐变文字的叠加效果更自然，且不受背景色干扰。

调整后的完整CSS：

#elite {
  position: relative;
  font-size: 4rem;
}

/* 渐变文字核心设置 */
.text {
  background: linear-gradient(to right, #ff4e50, #fc913a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* 必须透明才能显示渐变 */
}

/* 动画容器：用遮罩限制只在文字区域显示 */
.pops {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: var(--text-mask);
  mask: var(--text-mask);
}

/* 动态生成文字遮罩（兼容webkit和标准语法） */
#elite::after {
  content: 'Elite';
  position: absolute;
  inset: 0;
  color: black;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: black;
  -webkit-mask: linear-gradient(black, black);
  mask: linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  --text-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  --text-mask: -webkit-linear-gradient(black, black) content-box, -webkit-linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* 脉冲动画元素 */
.pop {
  height: var(--size, 100%);
  aspect-ratio: 1;
  background: radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%);
  position: absolute;
  animation: scale var(--s, 2s) var(--d, 0s) infinite alternate;
  left: var(--x, 0);
  top: var(--y, 0);
  scale: 0;
  translate: -50% -50%;
  filter: blur(2px);
  mix-blend-mode: overlay; /* 替换原来的multiply，适配白色背景 */
}

/* 保留原有的脉冲位置和动画参数 */
.pop:nth-of-type(1) {
  --x: 10%;
  --y: 25%;
  --h: 277;
  --s2: 6;
  --d: -0.25s;
  --s: 6s;
}

.pop:nth-of-type(2) {
  --x: 50%;
  --y: 45%;
  --h: 140;
  --s2: 5;
  --d: -0.75s;
  --s: 5s;
}
.pop:nth-of-type(3) {
  --x: 65%;
  --y: 75%;
  --h: 210;
  --s2: 3;
  --d: -0.5s;
  --s: 3s;
}
.pop:nth-of-type(4) {
  --x: 85%;
  --y: 15%;
  --h: 320;
  --s2: 5;
  --d: -1s;
  --s: 2s;
}
.pop:nth-of-type(5) {
  --x: 15%;
  --y: 100%;
  --h: 40;
  --s2: 3;
  --d: -1s;
  --s: 2s;
}

@keyframes scale {
  to {
    scale: var(--s2);
  }
}

为什么这样修改？ #

• 原来的color: white会完全覆盖渐变背景，只有黑色背景下靠混合模式的“变暗”效果才能勉强透出颜色，白色背景下就失效了。
• 文字遮罩技术确保动画只在文字范围内渲染，不管页面背景是白色还是其他颜色，动画都不会溢出到文字外，也不会被背景色干扰。
• overlay混合模式能让彩色脉冲和渐变文字自然叠加，既保留文字的渐变底色，又能显示脉冲的高亮效果，完美适配白色背景。

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