纯 CSS 打字效果

网页上的单行文字，可以用经典的 CSS 技巧让元素宽度以 steps() 分步增长，字母就像被逐个打出来，右侧边框则充当光标：

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid currentColor;
  width: 0;
  animation:
    typing 3s steps(11, end) forwards,
    blink 0.8s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

steps(11, end) 里的数字要与字符数一致，3s 决定打字速度。这种方式适合首屏标题，但多行文字、自定义字体和导出可分享文件都不太方便。

需要做成文件？

我们的打字文字 GIF 工具可以把同样的动画导出为循环 GIF，随处可用。

制作 GIF

前端组件库

使用 React 或 Vue 时，组件库通常已经提供打字效果，并支持速度、光标和循环参数。Framer 的动画工具包包含打字变体，MagicUI 提供专门的 TypingAnimation 组件，react-type-animation 和 typed.js 也可以直接安装使用。

想把组件的效果变成可分享文件，可以用免费的打字文字 GIF 工具生成并下载 GIF。

视频剪辑软件

如果需要更精致的画面，视频剪辑软件仍是传统选择。在 CapCut 中添加文字层并使用“打字机”动画后导出；在 After Effects 中，可以用 Source Text 关键帧表达式逐字截取字符串，再加一个 blinking 光标图层。它们控制力更强，但每次改字都要重新渲染。

如果只需要干净的打字循环，不想折腾时间线，打字文字 GIF 工具几秒就能生成。

免费在线 GIF 工具（推荐）

聊天、README、社交动态和文档里，循环 GIF 通常最便携，而且不需要安装任何软件：

输入文字：最多 200 个字符，支持换行。
选择风格与速度：9 种字体、自定义颜色或透明背景、光标样式、4 种画布尺寸和 5 档速度。
下载 GIF：在浏览器内生成，免费且无水印。

试试打字文字 GIF 工具：全程在浏览器运行，支持 iPhone 和 Android，无需注册。