打字光标闪烁特效（打字机逐字输入，光标样式闪烁可调）

效果演示（真实可交互）

经典终端/命令行风格动效，适合首屏标语、搜索框占位提示、控制台输出等场景。演示区可实时调节打字速度、光标样式与闪烁频率。

完整代码

<div class="tc-stage">
  <span class="tc-text" id="tcText"></span><span class="tc-cursor" id="tcCursor"></span>
</div>

.tc-cursor {
  display: inline-block;
  width: .55ch;
  height: 1.05em;
  background: #6c8cff;
  animation: tc-blink .9s steps(1) infinite;
}
@keyframes tc-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

const phrases = ['你好，我是粤喵组件站', '这里是自研动效组件库'];
let pi = 0, ci = 0, deleting = false;
const sleep = ms => new Promise(r => setTimeout(r, ms));

async function typeLoop() {
  const cur = phrases[pi];
  if (!deleting) {
    if (ci < cur.length) { textEl.textContent += cur[ci++]; await sleep(90); }
    else { await sleep(1500); deleting = true; }
  } else {
    if (ci > 0) { textEl.textContent = cur.slice(0, --ci); await sleep(45); }
    else { deleting = false; pi = (pi + 1) % phrases.length; await sleep(350); }
  }
  requestAnimationFrame(typeLoop);
}
typeLoop();

实现要点：打字阶段逐字追加字符并等待「打字间隔」，整句输入完停顿片刻后进入删除阶段，逐字删空再切换下一条。光标闪烁用 steps(1) 步进动画实现「开关式」闪烁，比线性淡出更像真实终端。

参数说明

兼容性与性能

• 每次状态变更只更新 textContent，文字量小，浏览器按文本节点增量处理，开销极低
• 光标闪烁只操作 opacity，位于合成层，不触发重排；steps(1) 步进动画比逐帧透明度更省资源
• 异步循环基于 requestAnimationFrame 续接，页面切后台时浏览器自动暂停计时，恢复后无缝继续
• 无需第三方库与 polyfill，Chrome / Safari / Firefox / Edge 及 iOS / Android 现代浏览器均可运行

常见问题

Q: 输入中文时会出现半个字的闪烁吗？ 不会。本实现按「字符」逐个追加，中文一字一追加；如需按词输入，可把追加单位从字符改为整词。

Q: 光标和文字对不齐怎么办？ 给光标设置与文字相同的 line-height，并使用 vertical-align: text-bottom 或 baseline 对齐；换样式时微调高度即可。

Q: 希望光标常亮不闪烁？ 去掉 animation 属性即可，或把闪烁滑块拉到最大值获得「慢闪」效果，适合强调输入状态的场景。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。