跳到正文
UIGrammer
EN 中文

动画 · 注意力引导 · 19

打字机

打字机 = 文字逐字显现、末尾光标闪烁,模仿实时输入以把视线引向某句话。

直达修改 Prompt

Typing…

尊重 prefers-reduced-motion:动画关闭,仅保留终态。

打字机是什么?

打字机让一句话逐字出现、末尾光标一直闪——读起来像「正在被写下」,把视线引向大标题或价值主张。用分段 clip(不是 width,那会重排)揭示,循环或停留皆可。只用于一句主标题,千万别用于段落。

动画 标本

触发
load
技术
css
时长
3.4s
缓动
steps(12, end)
性能
clip-path, opacity

什么时候用

  • A single hero headline or value prop
  • Terminal / coding brand voices

什么时候别用

  • Long copy — typing more than one line feels slow
  • As the only way to read critical info

Reveal with clip-path, not width — width animation reflows the whole line and stutters.

Reveal a phrase with a typewriter: stepped clip-path left-to-right plus a blinking caret, no width animation.