打字机文字

Typewriter Text

初级通用

首屏标题的后半句像有人在打字：一个字一个字打出来，停一会儿，再一个字一个字删掉，换下一个词，后面跟着一个闪烁的光标。一句话就能轮流讲出产品能做的好几件事。

你可能会说：「首页标题能不能做成「用 AI 帮你____」，后面的词像打字一样一个个出来，再删掉换下一个？」

效果预览标题后半句轮流打出几个词

正在加载演示…

怎么做3 步做出来

1
标题结构：固定部分 + 会变的部分 + 光标
读屏软件不该听到一个字一个字的变化，所以把完整的意思写在标题的 aria-label 里，正在打字的那部分标成 aria-hidden。给会变的部分一个最小宽度，避免字数变化时整行左右跳动。
查看代码收起代码html
```
<h1 aria-label="用 AI 帮你做网站、上线小程序、写 AI 应用">
  <span aria-hidden="true">
    用 AI 帮你<span class="typed"></span><span class="caret"></span>
  </span>
</h1>
```

闪烁的光标

光标就是一根细竖条，用 steps(1) 让它在「显示」和「隐藏」之间硬切换，像真的光标，而不是渐隐渐现。

查看代码css

.typed {
  display: inline-block;
  min-width: 7.5em; /* 留出最长那个词的宽度，避免整行跳动 */
  text-align: left;
  color: #4f46e5;
}
.caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

打字、停顿、删除、换词

用一个循环的定时器推进：没打完就多显示一个字，打完了停顿一会儿再开始删，删完换下一个词。删除比打字快一点更自然。开启减少动效时直接显示第一个词，不做动画。

查看代码js

const words = ['做一个网站', '上线一个小程序', '写一个 AI 应用'];
const TYPE_MS = 120;   // 每个字间隔
const PAUSE_MS = 1600; // 打完后停顿
const el = document.querySelector('.typed');

if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
  el.textContent = words[0];
} else {
  let word = 0;
  let length = 0;
  let deleting = false;
  const tick = () => {
    const full = words[word];
    length += deleting ? -1 : 1;
    el.textContent = full.slice(0, length);
    let delay = deleting ? TYPE_MS / 2 : TYPE_MS;
    if (!deleting && length === full.length) {
      deleting = true;
      delay = PAUSE_MS;
    } else if (deleting && length === 0) {
      deleting = false;
      word = (word + 1) % words.length;
      delay = 300;
    }
    setTimeout(tick, delay);
  };
  tick();
}

适合放在哪

适合用

官网或个人主页首屏标题，轮流展示产品能做的几件事或你的几种身份。
AI 工具的输入框占位文字，轮流打出几个示例问题，提示用户可以问什么。
活动页倒计时旁边轮流出现的卖点短句。

不适合用

用户必须读到的关键信息（价格、截止时间），别放进轮播打字；可能刚好在删除时被看到。
每个词很长（超过十几个字）时，别用打字效果；等太久，换成静态副标题。
页面上已经有很多动效时，别再加一个；会显得吵。

让 AI 帮你做复制给 AI Agent 直接用

请在【需要轮流展示几个词的标题，如：首页 Hero 的主标题】里加上打字机效果。先阅读标题组件和项目里的定时器、动画写法，确认文案从哪里来（是否有国际化）。要求：标题分为固定部分和轮播部分，轮播部分逐字打出、停顿约 1.5 秒、逐字删除（删除速度约为打字的两倍）后换下一个词，并跟一个用 steps(1) 闪烁的光标；完整意思写进标题的 aria-label，动态部分 aria-hidden；给动态部分预留最长词的宽度，避免布局跳动；组件卸载时清除定时器；开启减少动效时直接显示第一个词。沿用现有写法，不改无关代码。最后说明怎样验证：读屏只读完整标题，切换页面后没有残留的定时器。

用到的知识

排版关键帧无障碍减少动效