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

实现类似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 代码如下

    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>

效果截图如下:

4. 扩展--ch单位

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

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

2ch时如图:

1ch时如图:

1ch 相当于1个英文宽度

相关文章:

实现类似gpt 打字效果

1. css的动画&#xff08;animation) css中实现动画有两种方式&#xff1a;transition过渡动画、 animation自定义动画。 具体的可以看MDN链接&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation 使用keyframes自定义关键帧动画并未其命名使用自定义动…...

项目需求分析流程

项目需求分析是软件开发或任何工程项目中至关重要的第一步。它帮助确保团队理解客户的需求&#xff0c;并为后续的设计、开发和测试工作提供指导。以下是一个详细的需求分析流程&#xff1a; 一、确定项目目标 与利益相关者沟通&#xff1a;包括但不限于客户、最终用户、销售…...

idea连接SQL Server数据库_idea连接sqlserver数据库

4.设置密码&#xff08;这一步可以在安装数据库时就可以完成&#xff09;&#xff0c;如果觉得用户名有问题&#xff0c;也可以修改用户名 5.查看SQL Server端口号&#xff08;默认端口&#xff1a;1433&#xff09;&#xff0c;选择SQL Server2019配置管理器 6.打开SQL Server…...

Scala_【2】变量和数据类型

第二章 注释标识符的命名规范命名规则关键字 变量字符串输出数据类型关系变量和数据类型整数类型&#xff08;Byte、Short、Int、Long&#xff09;浮点类型&#xff08;Float、Double&#xff09;字符类型&#xff08;Char&#xff09;布尔类型&#xff08;Boolean&#xff09;…...

u3d中JSON数据处理

一.认识JSON 1.1 Json概述 JSON&#xff08;JavaScript Object Notation&#xff0c;JavaScript对象表示法&#xff09;JSON和XML是比较类似的技术&#xff0c;都是用来存储文本信息数据的&#xff1b;相对而言&#xff0c;JSON比XML体积更小巧&#xff0c;但是易读性不如XML…...

idea 安装插件(在线安装、离线安装)

目录 在线安装 离线安装 在线安装 1、打开IntelliJ IDEA 2024.x软件&#xff0c; 点击file-Settings 2、点击搜索框&#xff0c;输入plugins&#xff0c;找到plugins列&#xff0c;输入xxx软件--点击install 安装 3、重启idea 离线安装 1、在官网上下载插件包 &#xff08;1&…...

springboot maven 构建 建议使用 --release 21 而不是 -source 21 -target 21,因为它会自动设置系统模块的位置

使用 --release 选项代替 -source 和 -target 是一种更安全、更兼容的方式,特别是在构建使用较新版本 JDK 的项目时。以下是详细解释和建议: 1. 为什么推荐使用 --release 问题点: 使用 -source 和 -target 标志时,仅设置了代码的语言级别和字节码目标版本,但编译器仍可…...

离散数学 复习 详细(子群,元素的周期,循环群,合同)

子群: 定义: 设(G,)是一个群&#xff0c;H属于G,如果(H,)仍是一个群&#xff0c;则(H,)叫做(G,)的子群。如果G的一个子群H不等于G&#xff0c;即H是G的真子集&#xff0c;则(H,)叫做(G,)的真子群 平凡子群和非平凡子群: 任意群都有两个子集一定是群 (平凡子群):{e} {G},其他…...

Java后端常见问题 (一)jar:unknown was not found in alimaven

1.安装配置maven时未将原来的 mirror 标签注释掉 解决方法&#xff1a;找到 mirrors 标签&#xff0c;先将原来配置的http://0.0.0.0给注释了,这个是高版本的maven增加的一个保护机制&#xff0c;如果不注释&#xff0c;那么使用的时候就下载不了jar包&#xff0c;如下图所示。…...

overleaf中文生僻字显示不正确,显示双线F

我是不想换全文字体的&#xff0c;只是一个生僻字显示不出来&#xff0c;就想要像word一样&#xff0c;把这个生僻字用包含这个生僻字的字体来显示就好了。 解决步骤&#xff1a; 1、使用如下宏包&#xff1a; \usepackage{xeCJK} %声明宏包&#xff0c;主要用于支持在XeTeX…...

C语言中的贪心算法

贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取当前最优解的算法&#xff0c;希望通过局部最优解的选择&#xff0c;最终得到全局最优解。它常用于解决最优化问题&#xff0c;如最小生成树、最短路径等。本文将从理论到实践&#xff0c;逐步引导…...

虚幻引擎结构之UWorld

Uworld -> Ulevel ->Actors -> AActor 在虚幻引擎中&#xff0c;UWorld 类扮演着至关重要的角色&#xff0c;它就像是游戏世界的总指挥。作为游戏世界的核心容器&#xff0c;UWorld 包含了构成游戏体验的众多元素&#xff0c;从游戏实体到关卡设计&#xff0c;再到物…...

太通透了,Android 流程分析 蓝牙enable流程(stack/hidl)

零. 前言 由于Bluedroid的介绍文档有限,以及对Android的一些基本的知识需要了(Android 四大组件/AIDL/Framework/Binder机制/JNI/HIDL等),加上需要掌握的语言包括Java/C/C++等,加上网络上其实没有一个完整的介绍Bluedroid系列的文档,所以不管是蓝牙初学者还是蓝牙从业人员…...

2.微服务灰度发布落地实践(agent实现)

前言 据上一篇&#xff0c;设计方案的分析&#xff0c;综合考虑&#xff0c;最终决定,客户端采用agent方案实现&#xff0c;具本原因不再赘述&#xff0c; 感觉兴趣的小伙伴可以回头了解一下.该篇主要讲java agent的实现,灰度agent客户端的基础框架实现 java agent的介绍 ja…...

搭建医疗客服知识库:智慧医疗的基石

在医疗行业&#xff0c;客服知识库不仅是提供患者咨询和支持的平台&#xff0c;更是提升医疗服务效率和质量的关键工具。 1. 明确知识库的目标和价值 构建医疗行业客服知识库的首要任务是明确其目标和价值。这包括提供患者教育、辅助临床决策、优化患者服务流程等。明确目标后…...

CES Asia 2025的低空经济展区有哪些亮点?

CES Asia 2025&#xff08;赛逸展&#xff09;的低空经济展区有以下亮点&#xff1a; • 前沿科技产品展示&#xff1a; 多款新型无人机将亮相&#xff0c;如固定翼无人机和系留无人机的最新型号&#xff0c;其在监测、救援和货物运输等方面功能强大。此外&#xff0c;还有可能…...

Java/Spring项目包名为何以“com”开头?

文章目录 包名的基本概念域名反转规则历史背景包名的结构实际应用总结 在Java和Spring项目中&#xff0c;我们常常看到包名以“com”开头&#xff0c;比如com.example.project。这种命名方式看似简单&#xff0c;其实背后蕴含着不少学问。今天&#xff0c;我们就来聊聊这个话题…...

影刀进阶应用 | 知乎发布想法

文章目录 影刀进阶应用 | 知乎发布想法一、流程流程解释&#xff1a; 二、单条想法发布2.1 素材生产2.2 **进入发布流程**2.3 **输入文本**2.4 插入图片2.5 发布查看 三、批量发布 影刀进阶应用 | 知乎发布想法 一、流程 流程解释&#xff1a; 素材生产 &#xff1a;用AI生成待…...

v-if 和 v-for 优先级

一、优先级规则 在 Vue.js 中&#xff0c;v-for的优先级比v-if高。这意味着当它们同时出现在一个元素上时&#xff0c;v-for会首先被解析和执行。 <div v-for"item in items" v-if"shouldShow(item)">{{ item }}</div> 二、可能导致的问题 …...

【数据结构与算法】单向链表

一、什么是链表 链表由一系列节点组成&#xff0c;每个节点都包含一个 data 域&#xff08;存放数据&#xff09;和一个 next 域&#xff08;指向下一节点&#xff09;。链表中的节点可以按照任意顺序存放在内存中&#xff0c;它们之间并不连续。每个节点都记录了下一个节点的地…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...