当前位置：首页 > news >正文

实现类似gpt 打字效果

news 2025/6/27 4:53:57

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 代码如下

    const contentDiv = document.querySelector('#content')const data = '最简单的打字机效果实现'.split('')let index = 0function writing() {if (index < data.length) {contentDiv.innerHTML += data[index++]setTimeout(writing, 100)// requestAnimationFrame(writing)}}writing()

      #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

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

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

   <script>const contentDiv = document.querySelector('#content')let currentContent = '' // 存储当前显示的内容function writing(text) {let index = 0function appendText() {if (index < text.length) {currentContent += text[index]contentDiv.innerHTML = currentContentindex++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>

效果截图如下：