← 返回导航

打字机效果

animations
CSS steps() 实现
Hello, CSS World!
JS 字符串截取实现

关键点

  • 打字机效果通过逐字显示文本,配合闪烁光标模拟真实打字的视觉
  • 纯 CSS 方案用 steps() 阶梯函数控制 width 从 0 到 100%,配合 overflow: hidden
  • 光标闪烁用 border-right + @keyframes 控制透明度或边框颜色变化
  • JS 方案通过 setIntervalsetTimeout 逐个追加字符,可控制每字间隔更灵活
  • 多行文本需逐行动画或用 JS 动态插入换行,CSS 方案较适合单行标题

效果说明

两种打字机效果实现。方案一纯 CSS:等宽字体 + width 从 0 到 Nch,用 steps(N) 让宽度按字符数跳跃式增长,配合 border-right 光标闪烁。方案二用 JS slice(0, i) 逐字截取字符串,灵活支持中文与任意文本。

CSS 方案
JS 方案