打字机效果演示

欢迎来到打字机效果演示页面！这里将展示如何在博客文章中使用各种打字机效果。

基础打字机效果

最简单的打字机效果： Add commentMore actions

自定义速度的打字机效果

你可以调整打字速度：

带延迟的打字机效果

有时候你想要在页面加载后稍等一会再开始打字：

循环打字机效果

这个效果会不断地打字和删除，形成循环：

无光标的打字机效果

如果你不喜欢闪烁的光标：

自定义样式的打字机效果

你可以通过 className 添加自定义样式：

实际应用场景

1. 欢迎信息

2. 重要提示

3. 代码注释

多文本循环打字机效果

如果你想要显示多句话，可以使用多文本打字机组件。注意：这个功能需要在 Astro 页面中使用，不能在 MDX 中直接使用。

在 Astro 页面中的使用示例：

---
import MultiTypewriterEffect from "@/components/MultiTypewriterEffect.astro";
---

<MultiTypewriterEffect
  texts={[
    "第一句话",
    "第二句话", 
    "第三句话"
  ]}
  speed={60}
  delay={1000}
  pauseBetween={2000}
/>

TypewriterEffect参数说明

参数	类型	默认值	描述
`text`	string	-	可选：单句文本内容（与 `texts` 二选一）
`texts`	string[]	-	可选：多句文本数组（与 `text` 二选一）
`speed`	number	80	可选：打字速度（毫秒）
`delay`	number	1000	可选：开始前的延迟（毫秒）
`cursor`	boolean	true	可选：是否显示闪烁光标
`loop`	boolean	false	可选：是否循环播放（仅对单文本有效）
`pauseBetween`	number	2000	可选：句子间停顿时间（毫秒）
`className`	string	""	可选：自定义 CSS 类名

技术实现

这个打字机效果使用了以下技术：

Astro 组件: 基于 Astro 框架的组件系统
TypeScript: 提供类型安全
Intersection Observer API: 检测组件何时进入视口
CSS 动画: 实现光标闪烁效果
响应式设计: 适配各种屏幕尺寸

使用方法

在你的 MDX 文件中，只需要这样使用：

<Typewriter 
  text="你的文字内容" 
  speed={80}        // 可选：打字速度（毫秒）
  delay={1000}      // 可选：延迟开始（毫秒）
  cursor={true}     // 可选：是否显示光标
  loop={false}      // 可选：是否循环
  className=""      // 可选：自定义 CSS 类
/>

注意事项

性能优化: 组件使用了 Intersection Observer 来确保只有在视口中才开始动画
可访问性: 光标使用了合适的 ARIA 标签
主题适配: 自动适配博客的明暗主题
响应式: 在所有设备上都能正常工作

希望你喜欢这个打字机效果！如果有任何问题或建议，请随时联系我。

Thanks for reading!

打字机效果演示

2025年06月26日

709 字 · 3 分钟

tech Typewriter