实现类似gpt 打字效果

1. css的动画(animation)

css中实现动画有两种方式:transition过渡动画、 animation自定义动画。

具体的可以看MDN链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

  • 使用@keyframes自定义关键帧动画并未其命名
  • 使用自定义动画的时候,需要对animation属性进行配

|---------------------------|----------------------------------------------------------------------------------------------------------------------------------|
| 属性 | 含义 |
| animation-name | 指定一个或多个@keyframes自定义的动画名字,当多个的时候用,隔开。 例如:anination-name:test1,test2 |
| animation-duration | 指完成一个动画的所需要的时间 |
| animation-timing-function | 指动画效果在每个周期内是如何进行的 例如:linear:匀速运动 ease-in: 由慢到快 ease-out: 由快到慢 ease-in-out:由慢到快在到慢 steps(n, <jumpterm>): 将动画分为n分,然后按照n个定格显示动画效果 |
| animation-delay | 设置动画延迟时间(s/ms),默认为0,当为负数的时候,代表立即执行 *****适合当多个动画的时候,可依次定义每个动画的延迟执行时间, 区分开每个动画。 |
| animation-iteration-count | 动画执行次数,默认执行一次,infinite无限执行 可以指定多个动画效果,用,隔开 |
| animation-direction | 动画的运动方向 例如:reverse:反方向播放 alternate:正反交替播放(循环) |
| animation-fill-mode | 设置动画在执行前后的样式 例如:forwards : 目标元素保持最后一帧动画 backwards: 目标元素保持起始帧动画 |
| animation-play-state | 设置动画是暂停还是开始 |

2 . 使用animation 动画实现一个简单的打字效果

js/css 代码如下

javascript 复制代码
    const contentDiv = document.querySelector('#content')
      const data = '最简单的打字机效果实现'.split('')
      let index = 0
      function writing() {
        if (index < data.length) {
          contentDiv.innerHTML += data[index++]
          setTimeout(writing, 100)
          // requestAnimationFrame(writing)
        }
      }
      writing()
css 复制代码
      #content {
        height: 400px;
        padding: 10px;
        font-size: 28px;
        background-color: #eee;
        border-radius: 20px;
      }
      #content::after {
        color: #f00;
        animation: blink 1s infinite;
        content: '|';
      }
      @keyframes blink {
        from {opacity: 0;}
        to {opacity: 1;}
      }

效果如图:

3. 接入SSE,使用后台推送的数据,来动态实现打字效果

选SSE,主要是是我们不需要向后台推送数据,只需要实时接收就可以,SSE返回的是流式输出的数据

我们可以使用node 自己写一个sse 接口,如:

因为我们使用的模块的格式写的接口,所以需要在app.js里引入(一定要设置允许跨域,不然会出现跨域的情况)

在需要的页面中使用new EventSource来接入就可以了

具体关于SSE的可以看MDN的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

可以看到控制台是以流式来推数据的

把后台返回的数据,进行拼接展示

javascript 复制代码
   <script>
      const contentDiv = document.querySelector('#content')
      let currentContent = '' // 存储当前显示的内容
      function writing(text) {
        let index = 0
        function appendText() {
          if (index < text.length) {
            currentContent += text[index]
            contentDiv.innerHTML = currentContent
            index++
            setTimeout(appendText, 100) // 调整这个时间来改变打字速度
          }
        }
        appendText()
      }
      const sse = new EventSource('http://localhost:3000/user/sse')
      sse.addEventListener('message', (event) => {
        const data = JSON.parse(event.data)
        writing(data.msg)
      })
    </script>

效果截图如下:

4. 扩展--ch单位

ch是一个相对于数字0的大小

例如1ch 相当于1/2 汉字,也就是2ch 相当于一个汉字的宽度

2ch时如图:

1ch时如图:

1ch 相当于1个英文宽度

相关推荐
海森大数据2 天前
AI破解数学界遗忘谜题:GPT-5重新发现尘封二十年的埃尔德什问题解法
人工智能·gpt
七牛云行业应用2 天前
从API调用到智能体编排:GPT-5时代的AI开发新模式
大数据·人工智能·gpt·openai·agent开发
数据智能老司机3 天前
LLM 提示工程——理解 LLM
gpt·架构·llm
数据智能老司机3 天前
LLM 提示工程——提示工程入门
gpt·架构·llm
kebijuelun3 天前
OpenAI 最新开源模型 gpt-oss 架构与训练解析
人工智能·gpt·语言模型·架构
武子康4 天前
AI-调查研究-104-具身智能 从模型训练到机器人部署:ONNX、TensorRT、Triton全流程推理优化详解
人工智能·gpt·ai·性能优化·机器人·tensorflow·具身智能
lll上4 天前
三步对接gpt-5-pro!地表强AI模型实测
人工智能·gpt
七牛云行业应用5 天前
实战GPT-5:用“XML三明治”和“完美循环”重构你的提示
xml·gpt·重构
哪吒编程6 天前
谁是最强编程大模型?横向对比GPT-5、GPT-5 Codex、Claude Sonnet 4.5、Gemini 2.5 Pro
gpt·chatgpt·claude
小咕聊编程6 天前
【含文档+PPT+源码】基于SpringBoot+Gpt个人健康管理系统
java·gpt·tomcat·毕业设计·hibernate