前端实现打字机效果

最新推荐文章于 2025-04-01 14:29:50 发布

CuTmor

最新推荐文章于 2025-04-01 14:29:50 发布

阅读量1.8k

点赞数 16

文章标签：前端 react.js javascript css3 css

本文链接：https://blog.csdn.net/m0_73555097/article/details/143364390

版权

前端实现打字机效果

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

不过gpt这种大模型，返回的结果都是markdown格式的，一般都是一边打字机样式展示，一边渲染markdown，后来我了解到，大模型这种问答的原理是采用的流式传输，也就是服务器一边向客户端返回数据，然后一边渲染，我们的打字机效果都是在已知结果后，显式的去刻意呈现出打字机的效果，并不是gpt那种拿到多少展示多少，如果直接使用markdown来渲染，则丢失了打字机的效果，所以还是会有所冲突，具体的实现细节可以翻阅其他博客学习，这里只记录了实现打字机效果的方法

1. 纯CSS

使用css的话，可以使用 @keyframe 实现即可，思路就是在刚开始时，设置容器宽度为0，并且超出部分隐藏，然后慢慢扩大容器宽度，使文字显示出来即可。

原理其实很简单，但是缺点是我们需要知道容器的宽度，而且只能展示一行文本，如果多行的话就需要JavaScript来实现了

1. HTML 结构

首先，你需要一个包含要显示文本的元素。可以是一个 div 或 span。

<div class="typewriter">
  Hello, this is a typing effect!
</div>

2. CSS 样式

接下来，使用 CSS 创建打字机效果。可以通过设置 @keyframes 动画逐字显示文本。

.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;
}

/* 定义打字机动画 */
@keyframes typing {
  from {
    width: 0; /* 开始时宽度为 0 */
  }
  to {
    width: 100%; /* 结束时宽度为 100% */
  }
}

/* 定义光标闪烁效果 */
@keyframes blink-caret {
  from, to {
    border-color: transparent; /* 光标透明 */
  }
  50% {
    border-color: black; /* 光标可见 */
  }
}

代码解释

.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: 无限循环播放。
@keyframes typing：
- from { width: 0; }：动画开始时，宽度为 0。
- to { width: 100%; }：动画结束时，宽度为 100%，显示完整文本。
@keyframes blink-caret：
- 使用 from 和 to 设置光标颜色为透明，50% 时显示为黑色，形成闪烁效果。

补充animation动画样式字段常用属性：

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（来回播放）。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing Effect</title>
  <style>
    .typewriter {
      font-family: monospace;
      overflow: hidden;
      white-space: nowrap;
      border-right: 0.15em solid black;
      width: 0;
      animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite;
    }

    @keyframes typing {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    }

    @keyframes blink-caret {
      from, to {
        border-color: transparent;
      }
      50% {
        border-color: black;
      }
    }
  </style>
</head>
<body>

<div class="typewriter">
  Hello, this is a typing effect!
</div>

</body>
</html>

2. setInterval定时器实现

定时器的思路也比较好理解，就是拿到一长段文本后，再建一个变量用来表示要展示的文本，建立一个索引，用来表示遍历的长度，设置定时器，每隔多少秒展示一个字，索引自增，等到索引长度和文本的长度相等时，就销毁定时器释放内存

import React, { useState, useEffect } from "react";

function SearchResult({ answer }) {
  // 使用状态来控制文字逐字加载
  const [displayedAnswer, setDisplayedAnswer] = useState("");

  useEffect(() => {
    if (answer) {
      let currentIndex = 0; // 设置索引为0
      // 开启定时器
      const interval = setInterval(() => {
        setDisplayedAnswer((prev) => prev + answer[currentIndex]); //	依次展示文字
        currentIndex += 1;
        //	展示完成后销毁定时器
        if (currentIndex >= answer?.length - 1) {
          clearInterval(interval);
        }
      }, 50); // 每50毫秒加载一个字
    }
  }, [answer]);
  return (
    <div className="search-result-container">
      <div className="answer-box">
        {answer && (
          <p style={{ fontWeight: 600, fontSize: 18 }}>{displayedAnswer}</p>
        )}
      </div>
    </div>
  );
}

export default SearchResult;

3. typed.js库实现

Typed.js 是一个第三方库，实现了打字机效果，可以直接使用

你可以直接在HTML中引入：

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

或者安装第三方包：

npm install typed.js

直接使用：

var options = {
    strings: ["Hello, this is a typing effect!", "Typed.js is easy to use!"],
    typeSpeed: 50,   // 打字速度
    backSpeed: 25,   // 删除速度
    loop: true       // 是否循环播放
  };

  var typed = new Typed("#typewriter", options);