如何用Typed.js打造惊艳的打字动画：2023年完整入门指南 🚀

2026-02-05 05:11:47作者：滑思眉Philip

想让你的网站文字“活”起来吗？Typed.js——这款轻量级JavaScript打字动画库，能让普通文本瞬间变成动态打字效果，为网页增添专业感与互动性。无论是个人博客的欢迎语、产品官网的标语展示，还是活动页面的倒计时提示，Typed.js都能轻松实现文字逐个敲击、自动删除、循环切换的酷炫效果，零编程基础也能快速上手！

图：Typed.js实现的动态打字效果示例，展示文字逐字输入与智能退格功能

📦 两种极速安装方案，3分钟上手

1. 零基础首选：CDN一键引入 ⚡

无需复杂配置，复制这段代码到你的HTML文件，立即拥有打字动画：

<!-- 动画容器 -->
<span id="typed-text"></span>

<!-- 引入Typed.js库 -->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

<!-- 初始化动画 -->
<script>
  new Typed('#typed-text', {
    strings: ['欢迎来到我的网站 🌟', '用Typed.js让文字动起来！'],
    typeSpeed: 60,  // 打字速度（毫秒/字符）
    loop: true       // 循环播放
  });
</script>

2. 专业开发：NPM安装（支持React/Vue） 📌

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/ty/typed.js

# 安装依赖
cd typed.js && npm install

# 项目中引入
import Typed from 'typed.js';

React组件示例：

function TypedDemo() {
  const el = React.useRef(null);
  
  React.useEffect(() => {
    const typed = new Typed(el.current, {
      strings: ['React中使用Typed.js', '轻量级动画解决方案'],
      typeSpeed: 40
    });
    return () => typed.destroy();
  }, []);
  
  return <span ref={el} />;
}

⚙️ 5个实用功能，打造个性化打字效果

1. 智能退格：只删除差异部分 ✨

启用smartBackspace: true，让打字机只删除与上一句不同的内容，避免重复删除相同文字：

new Typed('#demo', {
  strings: ['JavaScript动画库', '轻量级打字效果工具'],
  smartBackspace: true,  // 默认开启
  backSpeed: 30          // 退格速度
});

2. 自定义暂停：打造节奏变化 ⏱️

使用^数字语法在文本中插入暂停，适合强调重点内容：

strings: [' Typed.js^1000 让文字拥有生命力^500 🔥']
// ^1000 表示暂停1秒，^500表示暂停0.5秒

3. HTML支持：富文本动画也能实现 🎨

直接在字符串中嵌入HTML标签，实现加粗、斜体等格式：

strings: ['<strong>Typed.js</strong>', '<em>轻量级</em>动画库']

4. 终端命令效果：模拟命令行输出 💻

配合\n换行符，打造逼真终端打字效果：

strings: ['git clone repo^800\n正在下载文件...^1200\n下载完成！']

5. 循环与淡出：高级动画控制 🔄

new Typed('#demo', {
  loop: true,          // 无限循环
  loopCount: 3,        // 循环3次（默认Infinity）
  fadeOut: true,       // 淡出替代退格
  fadeOutDelay: 500    // 淡出延迟
});