用 CSS 实现打字机动效

打字机效果常被当成"需要写一堆 JS"的事，其实纯 CSS 就够了。核心是两个动画：一个负责逐字展开宽度，一个负责光标的闪烁。

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--accent);
  width: 0;
  animation:
    typing 3s steps(24) forwards,
    caret 0.8s step-end infinite;
}

@keyframes typing {
  to { width: 24ch; }
}

@keyframes caret {
  50% { border-color: transparent; }
}

要点：

• steps(24) 让宽度按字符数离散增长，看起来像在"敲字"而不是平滑拉伸。
• ch 单位约等于一个字符宽，和 steps 的步数保持一致最自然。
• 记得在 prefers-reduced-motion 下关掉动画，直接显示完整文字。

就这么几行，一个克制的动态标题就活了。