打字机效果
打字机效果：文字一个一个出现，末尾光标闪烁。纯 CSS 做法：固定宽容器 + steps() 逐字推进的宽度动画 + overflow hidden；缺点是只适合单行定宽文字，多行动态文本要用 JS（见 JS 特效教程）。
关键在 animation-timing-function: steps(n, end)：n = 字符数，让宽度按“步进”而不是平滑变化，才有打字机颗粒感。
- 容器定宽 + overflow:hidden + white-space:nowrap
- 动画 width 用 steps(字符数, end) 逐字推进
- 光标：右边框 1px + steps(1) 闪烁动画
HTML
<style> .type { display: inline-block; margin: 40px auto; display: flex; justify-content: center; font-size: 24px; font-family: Consolas,monospace; } .type .text { overflow: hidden; white-space: nowrap; border-right: 2px solid #f778ba; width: 0; animation: typing 4s steps(13, end) forwards, caret .8s step-end infinite; } @keyframes typing { to { width: 15em; } } @keyframes caret { 50% { border-color: transparent; } } </style> <div class="type"><span class="text">Hello, 纯 CSS 打字机！</span></div>
本节要点纯 CSS 打字机 = steps() 步进宽度 + 右边框光标闪烁；多行动态内容请用 JS。
