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

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

✍️ 纯 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开发

推荐文章

淘宝npm镜像使用方法
2024-11-18 23:50:48 +0800 CST
如何实现虚拟滚动
2024-11-18 20:50:47 +0800 CST
Vue3 组件间通信的多种方式
2024-11-19 02:57:47 +0800 CST
Vue3中如何进行异步组件的加载?
2024-11-17 04:29:53 +0800 CST
go错误处理
2024-11-18 18:17:38 +0800 CST
Vue中如何处理异步更新DOM?
2024-11-18 22:38:53 +0800 CST
利用图片实现网站的加载速度
2024-11-18 12:29:31 +0800 CST
前端如何一次性渲染十万条数据?
2024-11-19 05:08:27 +0800 CST
如何在 Linux 系统上安装字体
2025-02-27 09:23:03 +0800 CST
Web浏览器的定时器问题思考
2024-11-18 22:19:55 +0800 CST
Rust 高性能 XML 读写库
2024-11-19 07:50:32 +0800 CST
Go 开发中的热加载指南
2024-11-18 23:01:27 +0800 CST
git使用笔记
2024-11-18 18:17:44 +0800 CST
使用xshell上传和下载文件
2024-11-18 12:55:11 +0800 CST
GROMACS:一个美轮美奂的C++库
2024-11-18 19:43:29 +0800 CST
资源文档库
2024-12-07 20:42:49 +0800 CST
Vue3中哪些API被废弃了?
2024-11-17 04:17:22 +0800 CST
一文详解回调地狱
2024-11-19 05:05:31 +0800 CST
企业官网案例-芊诺网络科技官网
2024-11-18 11:30:20 +0800 CST
JavaScript设计模式:观察者模式
2024-11-19 05:37:50 +0800 CST
Gin 框架的中间件 代码压缩
2024-11-19 08:23:48 +0800 CST
程序员茄子在线接单