如何实现可独立动画的异色重叠文本效果？

核心方案是通过绝对定位让两个独立文本元素重叠，分别设置颜色，这样每个元素都能单独进行动画或修改内容，完全不依赖mix-blend-mode。

代码实现 #

HTML

<div class="text-container">
  <span class="text-main">HELLO WORLD</span>
  <span class="text-overlay">HELLO WORLD<br>EXTRA TEXT</span>
</div>

CSS

.text-container {
  position: relative;
  font-size: 48px;
  font-weight: 700;
}

.text-main {
  position: relative;
  z-index: 1;
  color: #000000; /* 上层文本颜色 */
}

.text-overlay {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 0;
  color: #ff4444; /* 下层红色文本，可直接添加额外内容 */
}

关键说明 #

• 容器设置position: relative，作为绝对定位子元素的定位参考
• 两个文本元素独立存在，通过top/left控制偏移量，实现重叠错位效果
• 可单独给任意文本元素添加动画，比如给红色文本加位移动画：

.text-overlay {
  animation: shift 1.5s infinite alternate ease-in-out;
}

@keyframes shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(8px, 8px); }
}

这种方式直接设置各元素颜色，红色文本可自由添加额外内容，每个元素都能独立操作动画，完全符合需求。

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