实现原理概述
打字机效果的核心是让文字的宽度从0逐步增加到完整内容的宽度，同时每一步对应一个字符的显示。CSS的@keyframes可以定义动画的关键帧，而animation-timing-function的steps()函数可以将动画分成指定的步数，每一步刚好显示一个字符。另外需要搭配monospace等宽字体，保证每个字符宽度一致，避免出现宽度变化不均匀的问题。
具体实现步骤
1. 基础HTML结构
首先准备一个用于显示标题的容器，内部放置要展示的文字内容，这里用h1标签作为标题容器：
<h1 class="typewriter">欢迎来到我的个人博客</h1>
2. 核心CSS样式编写
接下来编写对应的CSS样式，主要包含等宽字体设置、文本溢出处理、动画定义三个部分：
/* 标题基础样式 */
.typewriter {
/* 使用等宽字体，保证每个字符宽度一致 */
font-family: monospace;
/* 不让文字换行 */
white-space: nowrap;
/* 隐藏超出宽度的内容 */
overflow: hidden;
/* 设置边框模拟光标，可选 */
border-right: 2px solid #333;
/* 设置动画，总时长4秒，步数为字符数，无限循环 */
animation: typing 4s steps(9) infinite, blink 0.75s step-end infinite;
/* 初始宽度为0 */
width: 0;
}
/* 逐字显示动画，从宽度0到完整宽度 */
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
/* 光标闪烁动画，可选 */
@keyframes blink {
from, to { border-color: transparent; }
50% { border-color: #333; }
}
3. 关键参数说明
这里的steps(9)中的数字9对应标题文字的总字符数，当前标题"欢迎来到我的个人博客"刚好是9个字符，所以设置为9。如果标题字符数变化，需要同步修改这个数值，否则会出现显示不完整或者多余空白的问题。动画总时长4秒可以根据需要调整，时长越短打字速度越快。
注意事项
- 必须使用等宽字体，否则每个字符宽度不同，steps步长无法对应单个字符，会出现显示错乱。
- 如果标题内容会动态变化，需要通过JavaScript动态计算字符数，修改
steps的参数值。 - 如果不需要光标效果，可以删除
border-right和blink相关的动画代码。 - 如果标题容器有固定宽度，
to { width: 100%; }可以替换为to { width: 容器固定宽度; }，保证动画结束宽度匹配容器。
效果扩展
如果想要动画结束后保持最终状态，不循环播放，可以去掉动画的infinite参数，同时给.typewriter添加animation-fill-mode: forwards;，让动画结束后保留最后一帧的状态：
.typewriter {
font-family: monospace;
white-space: nowrap;
overflow: hidden;
width: 0;
/* 动画结束后保留最终状态 */
animation-fill-mode: forwards;
/* 只播放一次打字动画，没有光标闪烁 */
animation: typing 4s steps(9);
}