打字机文字效果（纯 CSS + JS 双实现，可调速度）

效果演示（真实可交互）

完整代码

方式一：纯 CSS（适合固定文案）

<p class="typewriter">你好，我是粤喵 🎨</p>

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #6c8cff;   /* 光标 */
  width: 0;
  animation:
    typing 4s steps(24, end) forwards,  /* 打字时长=字符数×0.15s左右 */
    caret .7s step-end infinite;         /* 光标闪烁 */
}
@keyframes typing { to { width: 24em; } }
@keyframes caret { 50% { border-color: transparent; } }

要点：steps(n) 里的 n 取文案字符数（中文按字算）；width 目标值用 em 保证随字号缩放。

方式二：JS（支持循环打字+删除，适合多变文案）

<p id="typewriter" data-text="JavaScript 版打字机，逐字敲出！"></p>

const el = document.getElementById('typewriter');
const full = el.dataset.text;
let i = 0, deleting = false;
function tick() {
  el.textContent = full.slice(0, i);
  if (!deleting) {
    if (i < full.length) { i++; setTimeout(tick, 90); }        // 打字速度
    else { deleting = true; setTimeout(tick, 1600); }           // 停留时间
  } else {
    if (i > 0) { i--; setTimeout(tick, 40); }                   // 删除速度
    else { deleting = false; setTimeout(tick, 400); }           // 重新开始前停顿
  }
}
tick();

参数调节说明

兼容性与性能

• 纯 CSS 版零 JS，任何环境可用；JS 版约 300 字节
• 中文输入场景建议 JS 版（按字删除更自然）
• 屏幕阅读器兼容：JS 版最终内容为真实文本，可被读屏软件读取
• 注意：纯 CSS 版用 white-space: nowrap，超长文案会溢出，建议控制在 30 字内

常见问题

Q: 为什么我的纯 CSS 版光标不闪？ 检查 @keyframes caret 是否完整复制，且 border-right 初始有颜色。

Q: 支持中文吗？ 支持。JS 版直接按字符切分；纯 CSS 版 steps(n) 的 n 按中文字数填。

Q: 可以商用吗？ 可以，本组件为粤喵自研原创，免费商用无需署名。