实现类似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的动画(animation) css中实现动画有两种方式:transition过渡动画、 animation自定义动画。 具体的可以看MDN链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation 使用keyframes自定义关键帧动画并未其命名使用自定义动…...
项目需求分析流程
项目需求分析是软件开发或任何工程项目中至关重要的第一步。它帮助确保团队理解客户的需求,并为后续的设计、开发和测试工作提供指导。以下是一个详细的需求分析流程: 一、确定项目目标 与利益相关者沟通:包括但不限于客户、最终用户、销售…...
idea连接SQL Server数据库_idea连接sqlserver数据库
4.设置密码(这一步可以在安装数据库时就可以完成),如果觉得用户名有问题,也可以修改用户名 5.查看SQL Server端口号(默认端口:1433),选择SQL Server2019配置管理器 6.打开SQL Server…...
Scala_【2】变量和数据类型
第二章 注释标识符的命名规范命名规则关键字 变量字符串输出数据类型关系变量和数据类型整数类型(Byte、Short、Int、Long)浮点类型(Float、Double)字符类型(Char)布尔类型(Boolean)…...
u3d中JSON数据处理
一.认识JSON 1.1 Json概述 JSON(JavaScript Object Notation,JavaScript对象表示法)JSON和XML是比较类似的技术,都是用来存储文本信息数据的;相对而言,JSON比XML体积更小巧,但是易读性不如XML…...
idea 安装插件(在线安装、离线安装)
目录 在线安装 离线安装 在线安装 1、打开IntelliJ IDEA 2024.x软件, 点击file-Settings 2、点击搜索框,输入plugins,找到plugins列,输入xxx软件--点击install 安装 3、重启idea 离线安装 1、在官网上下载插件包 (1&…...
springboot maven 构建 建议使用 --release 21 而不是 -source 21 -target 21,因为它会自动设置系统模块的位置
使用 --release 选项代替 -source 和 -target 是一种更安全、更兼容的方式,特别是在构建使用较新版本 JDK 的项目时。以下是详细解释和建议: 1. 为什么推荐使用 --release 问题点: 使用 -source 和 -target 标志时,仅设置了代码的语言级别和字节码目标版本,但编译器仍可…...
离散数学 复习 详细(子群,元素的周期,循环群,合同)
子群: 定义: 设(G,)是一个群,H属于G,如果(H,)仍是一个群,则(H,)叫做(G,)的子群。如果G的一个子群H不等于G,即H是G的真子集,则(H,)叫做(G,)的真子群 平凡子群和非平凡子群: 任意群都有两个子集一定是群 (平凡子群):{e} {G},其他…...
Java后端常见问题 (一)jar:unknown was not found in alimaven
1.安装配置maven时未将原来的 mirror 标签注释掉 解决方法:找到 mirrors 标签,先将原来配置的http://0.0.0.0给注释了,这个是高版本的maven增加的一个保护机制,如果不注释,那么使用的时候就下载不了jar包,如下图所示。…...
overleaf中文生僻字显示不正确,显示双线F
我是不想换全文字体的,只是一个生僻字显示不出来,就想要像word一样,把这个生僻字用包含这个生僻字的字体来显示就好了。 解决步骤: 1、使用如下宏包: \usepackage{xeCJK} %声明宏包,主要用于支持在XeTeX…...
C语言中的贪心算法
贪心算法(Greedy Algorithm)是一种在每一步选择中都采取当前最优解的算法,希望通过局部最优解的选择,最终得到全局最优解。它常用于解决最优化问题,如最小生成树、最短路径等。本文将从理论到实践,逐步引导…...
虚幻引擎结构之UWorld
Uworld -> Ulevel ->Actors -> AActor 在虚幻引擎中,UWorld 类扮演着至关重要的角色,它就像是游戏世界的总指挥。作为游戏世界的核心容器,UWorld 包含了构成游戏体验的众多元素,从游戏实体到关卡设计,再到物…...
太通透了,Android 流程分析 蓝牙enable流程(stack/hidl)
零. 前言 由于Bluedroid的介绍文档有限,以及对Android的一些基本的知识需要了(Android 四大组件/AIDL/Framework/Binder机制/JNI/HIDL等),加上需要掌握的语言包括Java/C/C++等,加上网络上其实没有一个完整的介绍Bluedroid系列的文档,所以不管是蓝牙初学者还是蓝牙从业人员…...
2.微服务灰度发布落地实践(agent实现)
前言 据上一篇,设计方案的分析,综合考虑,最终决定,客户端采用agent方案实现,具本原因不再赘述, 感觉兴趣的小伙伴可以回头了解一下.该篇主要讲java agent的实现,灰度agent客户端的基础框架实现 java agent的介绍 ja…...
搭建医疗客服知识库:智慧医疗的基石
在医疗行业,客服知识库不仅是提供患者咨询和支持的平台,更是提升医疗服务效率和质量的关键工具。 1. 明确知识库的目标和价值 构建医疗行业客服知识库的首要任务是明确其目标和价值。这包括提供患者教育、辅助临床决策、优化患者服务流程等。明确目标后…...
CES Asia 2025的低空经济展区有哪些亮点?
CES Asia 2025(赛逸展)的低空经济展区有以下亮点: • 前沿科技产品展示: 多款新型无人机将亮相,如固定翼无人机和系留无人机的最新型号,其在监测、救援和货物运输等方面功能强大。此外,还有可能…...
Java/Spring项目包名为何以“com”开头?
文章目录 包名的基本概念域名反转规则历史背景包名的结构实际应用总结 在Java和Spring项目中,我们常常看到包名以“com”开头,比如com.example.project。这种命名方式看似简单,其实背后蕴含着不少学问。今天,我们就来聊聊这个话题…...
影刀进阶应用 | 知乎发布想法
文章目录 影刀进阶应用 | 知乎发布想法一、流程流程解释: 二、单条想法发布2.1 素材生产2.2 **进入发布流程**2.3 **输入文本**2.4 插入图片2.5 发布查看 三、批量发布 影刀进阶应用 | 知乎发布想法 一、流程 流程解释: 素材生产 :用AI生成待…...
v-if 和 v-for 优先级
一、优先级规则 在 Vue.js 中,v-for的优先级比v-if高。这意味着当它们同时出现在一个元素上时,v-for会首先被解析和执行。 <div v-for"item in items" v-if"shouldShow(item)">{{ item }}</div> 二、可能导致的问题 …...
【数据结构与算法】单向链表
一、什么是链表 链表由一系列节点组成,每个节点都包含一个 data 域(存放数据)和一个 next 域(指向下一节点)。链表中的节点可以按照任意顺序存放在内存中,它们之间并不连续。每个节点都记录了下一个节点的地…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
