清晨的微风轻轻拂过窗纱，案头的绿植随着风轻轻摇晃，这样宁静的时光最适合与代码来一场温柔对话。前端的朋友们，不必为面试的难题感到焦虑，每天清晨和上午，让我们暂且放下忙碌，静下心来，一起探索一道 CSS 高频面试题。就像晨跑能唤醒身体机能，此刻的学习也能唤醒你对技术的热情，为成长之路点亮一盏灯。

最近，“CSS 动态效果”“前端面试经典题型”“CSS 创新布局” 等关键词频频登上技术热搜，这些都是面试官检验能力的重要标尺。今天，我们就来攻克一道兼具创意与实用性的题目 ——如何用 CSS 实现一个文字逐个显现的打字机效果？ 这种充满趣味的效果，不仅能为网页增添交互性，掌握它还能让你在面试中展现独特的技术视角。

方法：利用 CSS 的@keyframes和overflow: hidden属性

@keyframes如同一位幕后导演，精心编排元素的变化剧情；overflow: hidden则像一个 “画框”，巧妙控制内容的显示范围，二者联手，就能打造出逼真的打字机效果。

/* 包裹文字的容器，设置溢出隐藏 */
.typing-effect-container {
width: 300px;
/* 隐藏超出容器宽度的文字 */
overflow: hidden;
border-right: 2px solid #000; /* 添加闪烁的光标效果 */
white-space: nowrap; /* 强制文字不换行 */
margin: 20px auto; /* 水平居中容器 */
/* 定义动画，持续时间4秒，线性过渡，无限循环 */
animation: typing 4s steps(20, end) infinite,
blink-caret 0.75s step-end infinite;
}
/* 定义打字动画关键帧 */
@keyframes typing {
from {
width: 0; /* 初始文字宽度为0 */
}
to {
width: 100%; /* 最终文字全部显示 */
}
}
/* 定义光标闪烁动画关键帧 */
@keyframes blink-caret {
from, to {
border-color: transparent; /* 隐藏光标 */
}
50% {
border-color: #000; /* 显示光标 */
}
}

首先，给容器设置固定宽度，并通过overflow: hidden隐藏超出部分的文字，white-space: nowrap确保文字不换行。border-right模拟闪烁的光标，animation同时应用两个动画：typing控制文字逐个显现，steps(20, end)表示将文字拆分为 20 步显示；blink-caret实现光标的闪烁效果，让整个过程更贴近真实的打字体验。

面试回答范本

当面试官问及文字逐个显现的打字机效果实现，你可以这样回答：“我会用 CSS 的@keyframes和overflow: hidden来实现。先创建一个容器，设置好宽度并隐藏溢出内容，再用border-right模拟光标。核心是通过@keyframes定义两个动画，一个是控制文字宽度从 0 到 100% 变化的typing动画，用steps函数拆分显示步骤；另一个是让光标闪烁的blink-caret动画，交替隐藏和显示边框。最后用animation属性把这两个动画应用到容器上，就能呈现出打字机效果。这种纯 CSS 的实现方式简单高效，也便于后期调整文字内容和动画速度。”

在网页交互效果设计中，有人认为纯 CSS 动画更轻量简洁，也有人觉得借助 JavaScript 能实现更复杂、更个性化的交互逻辑。你觉得在实现打字机这类动态效果时，CSS 和 JavaScript 谁更胜一筹？为什么？ 欢迎在评论区分享你的观点，和大家一起交流碰撞！如果今天的内容让你有所收获，别忘了点赞关注，明天清晨，我们继续相约，解锁更多 CSS 的奇妙玩法！