✨ 前端实现打字机效果的主流插件推荐

🎯 总结对比

插件名	体积	自定义	动画丰富	推荐场景
TypeIt	中	很强	很丰富	高级动画、官网
Typed.js	小	一般	常用足够	个人/博客/主页
t-writer.js	中	很强	丰富	多样动画
ityped	极小	一般	简单	极简、加载快

1️⃣ TypeIt（超强大，推荐！）

🎉 特点：高自定义、易用、支持暂停、删除、换行等丰富动画

安装：

bash 复制代码

npm install typeit
# 或直接用 CDN

简单用法：

html 复制代码

<div id="typeit"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typeit.min.js"></script>
<script>
  new TypeIt("#typeit", {
    strings: ["Hello, 掘金！", "我是打字机效果~"],
    speed: 100,
    breakLines: false,
    loop: true
  }).go();
</script>

2️⃣ Typed.js（最流行的打字机插件）

🚀 轻量、简单、社区大，支持多字符串轮播

安装：

bash 复制代码

npm install typed.js
# 或 CDN

用法：

html 复制代码

<span id="typed"></span>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  new Typed('#typed', {
    strings: ['欢迎来到掘金！', '一起学习前端吧~'],
    typeSpeed: 80,
    backSpeed: 40,
    loop: true
  });
</script>

3️⃣ t-writer.js（国人开发，API友好）

🔥 支持多种打字动画，API 设计简洁

安装：

bash 复制代码

npm install t-writer.js

用法：

html 复制代码

<div id="twriter"></div>
<script src="https://cdn.jsdelivr.net/npm/t-writer.js/dist/t-writer.min.js"></script>
<script>
  const target = document.getElementById('twriter');
  const writer = new TypeWriter(target, {
    loop: true,
    typeColor: 'blue'
  })
  writer
    .type('你好，掘金！')
    .rest(500)
    .changeOps({ typeColor: 'orange' })
    .type('打字机效果轻松实现~')
    .rest(1000)
    .clear()
    .start()
</script>

4️⃣ ityped（极简小巧）

⚡️ 零依赖，体积小，适合极简需求

安装：

bash 复制代码

npm install ityped

用法：

html 复制代码

<div id="ityped"></div>
<script src="https://unpkg.com/[email protected]"></script>
<script>
  ityped.init(document.querySelector("#ityped"), {
    strings: ['Hello 掘金', '前端打字机效果'],
    loop: true
  })
</script>

🛠️ 补充：用原生 JS 实现简单打字效果

如果你不想引入第三方库，也可以用 setTimeout/async 实现基础打字动画：

html 复制代码

<div id="simpleType"></div>
<script>
  const text = "Hello, 掘金！这是原生JS打字机效果~";
  let i = 0;
  function typing() {
    if (i < text.length) {
      document.getElementById('simpleType').innerHTML += text[i];
      i++;
      setTimeout(typing, 100);
    }
  }
  typing();
</script>

🌟 结语

需要高级动画，选 TypeIt/t-writer.js
需要轻量简单，选 Typed.js/ityped
只需基础效果，也可以原生 JS 10 行搞定！