当前位置: 首页 > 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;它们之间并不连续。每个节点都记录了下一个节点的地…...

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

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

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...