编程 ✍️ 纯 CSS 实现打字效果(无需 JavaScript)

2025-05-15 10:26:06 +0800 CST views 414

✍️ 纯 CSS 实现打字效果(无需 JavaScript)

在前端开发中,实现打字机效果(Typing Effect)是一个非常常见但有趣的交互动画。传统方式多依赖 JavaScript 的定时器来控制文字一个字一个字地显示,其实,纯 CSS 就可以轻松实现类似打字的动画效果,而且还带有光标闪烁效果。

本文将介绍如何使用纯 CSS 实现打字效果,无需一行 JavaScript

💻 核心代码实现

HTML 结构

<div class="typing-demo-wrapper">
  <div class="typing-demo">
    你好;欢迎来到程序员茄子的博客
  </div>
</div>

CSS 样式

.typing-demo-wrapper {
  height: 200px;
  overflow: auto;
}

.typing-demo {
  width: 26ch; /* 宽度设置为字符单位,控制打字范围 */
  animation: typing 3s steps(13), blink 0.5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid red; /* 光标效果 */
  font-size: 2em;
}

/* 打字关键帧动画 */
@keyframes typing {
  from {
    width: 0;
  }
}

/* 光标闪烁动画 */
@keyframes blink {
  50% {
    border-color: transparent;
  }
}

🎯 技术原理解析

  • width: 26ch:使用字符单位 ch 设定容器最大宽度,方便精确控制每个字符显示;
  • animation: typing 3s steps(13):打字动画耗时 3 秒,共分 13 步(即 13 个字符);
  • overflow: hidden + white-space: nowrap:隐藏溢出内容,并保持文字在一行;
  • border-right:模拟打字机光标;
  • blink 动画:通过改变 border-color 实现光标闪烁。

🔧 可配置建议

参数作用示例
steps(n)控制字数steps(13) 表示 13 字
animation-duration动画持续时间3s 表示 3 秒完成打字
border-color光标颜色red 可改为 #333
font-size字体大小自行调整适配页面

🧪 实战 Tips

  • ch 是基于字体的单位,1ch ≈ 一个 "0" 字符的宽度,使用它来控制字数特别精准;
  • 使用 steps() 可以让每一步对应一个字符显示,避免线性动画带来的“卡顿感”;
  • 多段文字打字效果可通过多个 .typing-demo 组合使用。

🧱 小结

  • 无需 JS,纯 CSS 实现;
  • ✅ 可配置性强,支持文字数量与时间自定义;
  • ✅ 可作为博客签名、欢迎页引导动画、404 页面等使用。

📎 拓展玩法(进阶可考虑)

  • 多段分步打字(多个元素组合);
  • 打完字后光标停止闪烁;
  • 添加背景音效模拟打字音(需 JS);
  • 与 CSS 动画延迟结合,实现分时打字。
复制全文 生成海报 前端 动画 Web开发

推荐文章

Vue3 实现页面上下滑动方案
2025-06-28 17:07:57 +0800 CST
使用 sync.Pool 优化 Go 程序性能
2024-11-19 05:56:51 +0800 CST
JavaScript中设置器和获取器
2024-11-17 19:54:27 +0800 CST
PHP 唯一卡号生成
2024-11-18 21:24:12 +0800 CST
一键压缩图片代码
2024-11-19 00:41:25 +0800 CST
Rust开发笔记 | Rust的交互式Shell
2024-11-18 19:55:44 +0800 CST
Redis和Memcached有什么区别?
2024-11-18 17:57:13 +0800 CST
Web浏览器的定时器问题思考
2024-11-18 22:19:55 +0800 CST
Nginx 实操指南:从入门到精通
2024-11-19 04:16:19 +0800 CST
Go 开发中的热加载指南
2024-11-18 23:01:27 +0800 CST
XSS攻击是什么?
2024-11-19 02:10:07 +0800 CST
html一些比较人使用的技巧和代码
2024-11-17 05:05:01 +0800 CST
MyLib5,一个Python中非常有用的库
2024-11-18 12:50:13 +0800 CST
H5抖音商城小黄车购物系统
2024-11-19 08:04:29 +0800 CST
html文本加载动画
2024-11-19 06:24:21 +0800 CST
404错误页面的HTML代码
2024-11-19 06:55:51 +0800 CST
mysql时间对比
2024-11-18 14:35:19 +0800 CST
Vue3中的Scoped Slots有什么改变?
2024-11-17 13:50:01 +0800 CST
纯CSS绘制iPhoneX的外观
2024-11-19 06:39:43 +0800 CST
Nginx 反向代理
2024-11-19 08:02:10 +0800 CST
Vue3中如何使用计算属性?
2024-11-18 10:18:12 +0800 CST
55个常用的JavaScript代码段
2024-11-18 22:38:45 +0800 CST
go发送邮件代码
2024-11-18 18:30:31 +0800 CST
一些好玩且实用的开源AI工具
2024-11-19 09:31:57 +0800 CST
程序员茄子在线接单