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

🎯 总结对比

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

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

安装：

npm install typeit
# 或直接用 CDN

简单用法：

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

  }).go();
</script>

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

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

安装：

npm install typed.js
# 或 CDN

用法：

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

  });
</script>

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

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

安装：

npm install t-writer.js

用法：

<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（极简小巧）

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

安装：

npm install ityped

用法：

<div id="ityped"></div>
<script src="https://unpkg.com/ityped@1.0.3"></script>
<script>

  ityped.init(document.querySelector("#ityped"), {
strings: ['Hello 掘金', '前端打字机效果'],
loop: true

  })
</script>

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

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

<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 行搞定！