前端实现打字机效果

最近做项目有做类似gpt的大模型组件，模拟返回的数据渲染时，希望实现打字机的效果，这样用户体验更好一些，于是稍微记录一下学到的可以实现的方法

1. 纯CSS

1. HTML 结构

2. CSS 样式

代码解释

1. .typewriter:
• font-family: monospace;：使用等宽字体，增强打字机效果。
• overflow: hidden;：隐藏超出边界的内容，确保文本在动画过程中不会显示。
• white-space: nowrap;：文本不换行，保持在一行中。
• border-right: 0.15em solid black;：创建光标效果，宽度可以根据需要调整。
• width: 0：初始宽度为 0，文本将逐步展开。
• animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite
• typing 动画持续 4 秒，使用 steps(40, end) 以 40 个步骤逐字显示文本（根据文本长度调整）。
• blink-caret 动画使光标闪烁，持续 0.75 秒，形成循环效果。
• infinite: 无限循环播放。

2. @keyframes typing：
• from { width: 0; }：动画开始时，宽度为 0。
• to { width: 100%; }：动画结束时，宽度为 100%，显示完整文本。

3. @keyframes blink-caret：
• 使用 from 和 to 设置光标颜色为透明，50% 时显示为黑色，形成闪烁效果。

• animation-name: 指定要使用的动画名称（即 @keyframes 的名称）。

• animation-duration: 动画持续的时间。

• animation-timing-function: 动画的速度曲线，比如 ease、linear、ease-in、ease-out 等。

• animation-delay: 动画开始之前的延迟时间。

• animation-iteration-count: 动画播放的次数，比如 infinite（无限循环）或者具体次数。

• animation-direction: 动画播放的方向，normal（正向播放），reverse（反向播放），alternate（来回播放）。

完整代码

2. setInterval定时器实现

3. typed.js库实现