本文介绍如何仅用纯 css 实现两个文本（如“hello!”和“how are you?”）之间的循环式打字机效果——先显示第一个文本，2秒后淡入第二个文本并隐藏第一个，再过2秒切回第一个，形成自然往复的视觉动效。
本文介绍如何仅用纯 css 实现两个文本（如“hello!”和“how are you?”）之间的循环式打字机效果——先显示第一个文本，2秒后淡入第二个文本并隐藏第一个，再过2秒切回第一个，形成自然往复的视觉动效。
要实现真正意义上的“文本替换式打字机动效”（即逐字输入感 + 两段内容交替出现 + 自动往返），纯 CSS 无法模拟逐字符渲染逻辑（这需 JavaScript 配合 innerHTML 和定时器），但可通过叠加 + 透明度控制 + 精确时序动画，高度拟真地达成视觉等效效果。
以下是一个简洁、可复用的纯 CSS 解决方案：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Typewriter effect</title><style>
.container {
text-align: center;
margin: 2rem auto;
max-width: 600px;
}
.text-animation {
display: inline-block;
font-size: 2.5rem;
font-weight: bold;
color: #333;
/* 关键：重叠定位，避免布局跳动 */
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
/* 总周期4s：2s显示A → 0.5s过渡 → 2s显示B → 0.5s过渡 → 循环 */
animation: switchText 4s linear infinite;
}
@keyframes switchText {
/* 第一段文本：0–0.8s 显示，0.8–1s 淡出；第二段：2–2.8s 显示，2.8–3s 淡出 */
0%, 20% { opacity: 1; }
25%, 100% { opacity: 0; }
}
/* 第二个文本延迟2s启动动画，使其在第一段淡出后开始淡入 */
.text-animation:nth-child(2) {
animation-delay: 2s;
}
/* 防止绝对定位导致容器塌陷 */
.container::after {
content: "";
display: block;
clear: both;
}
</style><div class="container">
<h1 class="text-animation">Hello!</h1>
<h1 class="text-animation">How are you?</h1>
</div>
✅ 核心原理说明：
- 两个
元素使用 position: absolute 叠加在同一位置，确保视觉上“替换”而非“位移”；
- .text-animation 统一设置 opacity: 0 初始态，并通过 @keyframes switchText 控制透明度变化节奏；
- animation-delay: 2s 让第二段文本的动画比第一段晚2秒开始，从而实现「第一段显示2s → 过渡 → 第二段显示2s → 过渡 → 回到第一段」的闭环；
- 动画总时长设为 4s 并 infinite 循环，配合 25% 节点精准划分显示/隐藏区间，避免闪烁或重叠显示。
⚠️ 注意事项：
- 此方案为视觉模拟，不包含真实逐字打字逻辑（如光标闪烁、字符逐帧渲染）。若需真实打字机体验（含光标、删除动画、多行支持），应结合 JavaScript；
- 动画时间可按需调整：例如将 4s 改为 6s 并同步修改 animation-delay: 3s，即可延长每段停留时间；
- 建议为 .container 添加 min-height 或占位内容，防止绝对定位元素导致父容器高度塌陷；
- 在响应式场景中，可对 .text-animation 添加 font-size: clamp(...) 或媒体查询适配不同屏幕。
该方法轻量、无 JS 依赖、兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ v100），是静态页面中实现优雅文本轮播的理想选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
