css标题想做打字机效果如何实现_利用steps与keyframes模拟逐字显示_网络技术

css标题想做打字机效果如何实现_利用steps与keyframes模拟逐字显示

发布时间 - 2025-12-26 00:00:00 点击率：次

CSS打字机效果需用animation配合steps()实现逐字显示，核心是width从0到100%动画配steps(字符数,end)，加border-right模拟光标，推荐等宽字体并手动统计字符数（含空格），ch单位更精准，clip-path可支持多行。

用 CSS 实现标题的打字机效果，核心是结合 animation、@keyframes 和 steps() 时间函数——它能让动画“卡顿式”逐帧播放，完美模拟一个字一个字打出来的节奏。

基础原理：用 steps() 控制动画步进

steps(n, [start | end]) 把一段动画均匀切成 n 步，每步停留固定时间。打字效果本质就是：文字从「全隐藏」→「逐个显示」，靠控制 width 或 clip-path 配合 steps() 实现“跳变式”展开。

推荐用 width + overflow: hidden：给容器设固定宽高，初始 width: 0，动画中拉宽到完整宽度，配合 steps(字数, end) 让每次只“跳”出一个字的宽度
steps(6, end) 表示把整个动画过程分 6 步，且在每步**结束时**才跳变（更符合打字节奏）
字体等宽（如 font-family: monospace）会让宽度计算更稳定，但非必须

代码实现（纯 CSS，无需 JS）

假设标题是

`Hello World`

：

.typewriter {
  font-family: monospace;
  overflow: hidden;
  border-right: 2px solid #000; /* 可选光标效果 */
  white-space: nowrap;
  width: 0;
  animation: 
    typing 3.5s steps(11, end), /* 11 个字符（含空格），end 表示停在每步末尾 */
    blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #000 }
}

注意：steps(11, end) 中的 11 要手动数清文本字符数（包括空格、标点），否则会跳太快或卡住
光标闪烁用另一个独立动画叠加，step-end 避免闪烁不自然
若想兼容中文，确保字体支持（如 font-family: "PingFang SC", "Microsoft YaHei", monospace），宽度计算依然有效

进阶技巧：支持多行 & 自适应字数

纯 CSS 难以自动获取字符数，但可通过以下方式提升实用性：

用 ch 单位替代百分比：width: 0 → width: 11ch，更精准对应字符宽度（尤其等宽字体）
多行打字？改用 clip-path: inset(0 100% 0 0) 动画裁剪区域，配合 steps() 模拟逐行出现（需预估行数）
想“删掉重打”？加第二段动画，先 width: 100% → width: 0（反向 steps），再重新 typing

注意事项与兼容性

steps() 在所有现代浏览器（Chrome/Firefox/Safari/Edge）均支持良好，IE10+ 也支持。但要注意：

避免对 display 或 visibility 做 steps 动画——它们不触发重排，无法逐字生效
不要用 opacity 模拟打字（会整段淡入，不是逐字）
移动端需测试字体加载延迟，可加 font-display: swap 防止闪动

基本上就这些。不复杂但容易忽略细节：数准字符、选对属性、用对 steps 参数。

# css # js # 浏览器 # edge # 字节 # safari # microsoft # overflow # firefox # chrome # class

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：医院网站建设如何优化患者在线服务功能？

下一篇：tomcat简介_动力节点Java学院整理

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：医院网站建设如何优化患者在线服务功能？

下一篇：tomcat简介_动力节点Java学院整理