页面加载时字符逐行输出动画：平滑应用文字渐变且无HTML标签显示

你当前的实现是直接将包含HTML标签的字符串拆分为单个字符依次输出，这会导致<span>这类标签的符号被当作普通文本显示，同时因为标签本身有多个字符，处理时会产生明显停顿。下面是满足你所有需求的实现方案：

实现代码 #

HTML

<div class="text-container"></div>

CSS

.text-container {
  font-size: 20px;
  line-height: 1.6;
  max-width: 600px;
  margin: 2rem auto;
}
.gradient-text {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  color: transparent;
}

JavaScript

// 结构化定义文本内容，区分普通文本和渐变文本片段
const textData = [
  "页面加载完成，开始逐字符输出文本。",
  { type: "gradient", content: "这段文字带有渐变色彩" },
  "，接下来换行展示第二行内容。\n",
  "第二行的普通文本部分，",
  { type: "gradient", content: "第二行的渐变高亮文字" },
  "，动画执行完毕。"
];

const container = document.querySelector('.text-container');
let dataIndex = 0;       // 当前处理的textData片段索引
let charIndex = 0;       // 当前片段的字符索引
let activeElement = null;// 当前正在填充的渐变元素
const linePause = 1200;  // 行末停顿时长（毫秒）
const charSpeed = 80;    // 单字符输出间隔（毫秒）

function typeNextChar() {
  if (dataIndex >= textData.length) return;

  const currentSegment = textData[dataIndex];

  // 处理普通文本片段
  if (typeof currentSegment === 'string') {
    if (charIndex >= currentSegment.length) {
      // 当前片段处理完毕，切换到下一个
      dataIndex++;
      charIndex = 0;
      // 检查是否是行末，触发停顿
      if (currentSegment.includes('\n')) {
        setTimeout(typeNextChar, linePause);
      } else {
        typeNextChar();
      }
      return;
    }

    const char = currentSegment[charIndex];
    if (char === '\n') {
      container.appendChild(document.createElement('br'));
    } else {
      container.textContent += char;
    }
    charIndex++;
    setTimeout(typeNextChar, charSpeed);
  } 
  // 处理渐变文本片段
  else if (currentSegment.type === 'gradient') {
    // 首次处理渐变片段时，创建对应的span元素
    if (!activeElement) {
      activeElement = document.createElement('span');
      activeElement.classList.add('gradient-text');
      container.appendChild(activeElement);
    }

    if (charIndex >= currentSegment.content.length) {
      // 渐变片段处理完毕，重置状态
      dataIndex++;
      charIndex = 0;
      activeElement = null;
      typeNextChar();
      return;
    }

    const char = currentSegment.content[charIndex];
    activeElement.textContent += char;
    charIndex++;
    setTimeout(typeNextChar, charSpeed);
  }
}

// 页面加载完成启动动画
window.addEventListener('load', typeNextChar);

方案核心说明 #

1. 结构化文本定义：用数组拆分文本片段，普通文本存为字符串，渐变文本存为包含类型和内容的对象，彻底避免直接操作HTML标签。
2. 无标签字符泄露：动画过程中动态创建渐变用的<span>元素，直接往元素内填充字符，不会显示任何标签符号。
3. 统一流畅度：普通文本和渐变文本使用相同的字符输出间隔，保证动画全程无停顿。
4. 行末停顿处理：检测到文本中的换行符时，触发指定时长的停顿，满足逐行输出的需求。

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