免费在线打字机效果生成器。创建CSS/JS打字机动画，支持自定义打字速度、删除速度、光标样式、循环播放。实时预览，一键复制HTML+CSS+JS代码。无需注册。
零依赖·可离线使用📝 文本内容
🎛️ 参数配置
80ms
40ms
2000ms
500ms
32px
👁️ 实时预览
📋 生成代码
📖 关于打字机效果
打字机效果（Typewriter Effect）是一种文字逐字显示的动画效果，模拟老式打字机的输入方式。文字以设定的速度逐个字符出现，配合闪烁光标，营造打字输入的视觉感受。这种效果在现代网页设计中非常流行，特别适合首页标题、产品介绍和创意展示。
实现方式对比
- 纯CSS方案：使用animation + steps()函数，代码简洁，但只能显示固定单行文本
- JS方案：通过定时器逐字添加/删除文本，支持多行切换、动态内容
- CSS+JS混合：JS控制文本内容，CSS控制光标和过渡动画，最佳实践
什么时候用打字机效果生成器
- 网站首页Hero区域标题动画
- 产品功能介绍文字展示
- 聊天界面消息气泡
- 代码演示逐行显示
- 故事叙述沉浸式体验
- 命令行风格界面设计
❓ 常见问题
什么是打字机效果？
打字机效果是一种文字逐字显示的动画效果，模拟老式打字机的输入方式。文字以设定的速度逐个字符出现，通常配合闪烁光标，营造打字输入的视觉感受。常用于网站首页标题、产品介绍和创意展示。
CSS和JS实现打字机效果有什么区别？
纯CSS方案使用animation和steps()函数实现，代码简洁但功能有限，只能显示固定文本。JS方案通过定时器逐字添加文本，支持多行文本切换、删除重打、动态内容等高级功能。本工具同时支持两种方案。
如何实现多行文本切换效果？
多行文本切换需要JavaScript实现：先逐字打出第一行文本，暂停一段时间后逐字删除，再打出第二行文本，如此循环。本工具支持输入多行文本，自动生成切换动画代码。
光标闪烁效果如何实现？
光标闪烁可以通过CSS animation实现：使用::after伪元素添加竖线或方块，配合@keyframes设置opacity在0和1之间交替。也可以使用border-right配合animation实现。闪烁频率通常为0.5-1秒一个周期。
打字机效果适合什么场景？
打字机效果适合多种场景：1) 网站首页Hero区域的标题动画；2) 产品功能介绍的文字展示；3) 聊天界面的消息气泡；4) 代码演示的逐行显示；5) 故事叙述的沉浸式体验；6) 命令行风格的界面设计。
已复制到剪贴板