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

【前端】输入时字符跳动动画实现

news 2026/3/31 21:08:34

输入时字符跳动动画实现

在前端开发中，为了提升用户体验，我们经常需要为用户的交互行为提供即时的反馈。这不仅让用户知道他们的操作有了响应，还可以让整个界面看起来更加生动、有趣。本文将通过一个简单的例子讲解如何实现在用户输入字符时，让字符产生一个小跳动的动画效果，使得界面交互更为生动。
请添加图片描述

技术方案概述

实现这一效果的核心思路是利用CSS的关键帧动画（Keyframes Animation）来定义字符的跳动动画，并通过JavaScript来动态地将动画应用到用户每次输入的新字符上。同时，为了保持输入框内容和展示的内容同步，我们还需要对输入框的值进行监听，并相应地更新显示区域的内容。

关键技术点

  1. CSS 关键帧动画：利用@keyframes规则定义一个动画，描述该动画中每个阶段的样式。
  2. JavaScript 事件监听：监听输入框（<input>元素）的input事件，以便在用户每次输入时触发更新。
  3. JavaScript DOM 操作：动态地创建和更新DOM元素来反映输入内容的变化，并应用动画效果。

实现步骤

  1. 定义字符跳动的动画

首先，我们使用@keyframes规则定义一个名为bounce的动画。这个动画简单地使得元素先向上移动10px（30%过程点），然后回到原位置（100%过程点）。

@keyframes bounce {0% { transform: translateY(0); }30% { transform: translateY(-10px); }100% { transform: translateY(0); }
}
  1. 样式准备

我们需要为动态生成的字符元素应用动画，并对输入框和文本展示区域进行基本的样式设置。

.character {display: inline-block;animation: bounce 0.6s;font-size: 24px;
}#input-box {/* ...省略无关样式... */opacity: 0; /* 让输入框透明，但仍可输入 */
}#animated-text {/* ...省略无关样式... */
}
  1. JavaScript 事件监听与动态DOM更新

当用户输入字符时，通过监听input事件来捕获输入值的变化，并根据这些变化动态创建<span>元素来包裹每个字符。对于新增的字符，我们为其添加定义好的动画效果。

document.getElementById('input-box').addEventListener('input', function (event) {const inputText = event.target.value;const container = document.getElementById('animated-text');const existingText = container.textContent;// 如果是删除操作，直接同步内容，不添加动画if (inputText.length < existingText.length) {container.innerHTML = '';for (let char of inputText) {let span = document.createElement('span');span.textContent = char;container.appendChild(span);}} else {// 新增字符，添加跳动动画const newChar = inputText[inputText.length - 1];let span = document.createElement('span');span.className = 'character';span.textContent = newChar;container.appendChild(span);}
});

DEMO

这段代码可以直接拷贝到html文件中允许查看效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>输入动画效果</title><style>@keyframes bounce {0% {transform: translateY(0);}30% {transform: translateY(-10px);}100% {transform: translateY(0);}}.character {display: inline-block;animation: bounce 0.6s;font-size: 24px;font-family: 'Arial', sans-serif;}#input-box {font-size: 24px;opacity: 0;width: 200px;min-height: 28px;line-height: 28px;position: absolute;top: 0;left: 0;z-index: 2;}#animated-text {border: 1px solid #eee;width: 200px;min-height: 28px;line-height: 28px;position: absolute;top: 0;left: 0;font-size: 24px;}</style>
</head><body><input type="text" id="input-box" placeholder="输入文字看效果..."><div id="animated-text"></div><script>document.getElementById('input-box').addEventListener('input', function (event) {const inputText = event.target.value;const container = document.getElementById('animated-text');const existingText = container.textContent;// 如果是删除操作，直接同步内容，不添加动画if (inputText.length < existingText.length) {container.innerHTML = '';  // 清除旧的字符// 重新添加字符，但不包括最新的字符，因为是删除操作for (let char of inputText) {let span = document.createElement('span');span.textContent = char;container.appendChild(span);}} else {// 找出新增的字符const newChar = inputText[inputText.length - 1];let span = document.createElement('span');span.className = 'character';  // 应用动画的类span.textContent = newChar;container.appendChild(span);}});</script>
</body></html>

总结

通过以上的技术方案，我们实现了一个在用户输入字符时，字符跳动的动画效果。这种方法不仅增强了用户体验，使界面交互看起来更加动态和有趣，而且也体现了CSS动画和JavaScript相结合的强大功能。对于开发者来说，掌握这类交互效果的实现方法可以更好地为用户创建吸引人的前端体验。

相关文章：

【前端】输入时字符跳动动画实现

输入时字符跳动动画实现 在前端开发中&#xff0c;为了提升用户体验&#xff0c;我们经常需要为用户的交互行为提供即时的反馈。这不仅让用户知道他们的操作有了响应&#xff0c;还可以让整个界面看起来更加生动、有趣。本文将通过一个简单的例子讲解如何实现在用户输入字符时…...

编程日记 2024/5/10 23:17:29

C语言面试重点问题

1. 冒泡排序法 2. strlen、strcpy、strcat、strcmp的用法和原理 3. 大小端的区分 3.1 主函数区分大小端 #include <stdio.h>int main(void) {int num 0x11223344;char *p (char *)&num;if (0x11 *p){printf("大端!\n");}else if (0x44 *p){printf(…...

编程日记 2024/5/10 23:16:27

antlr4略解

文章目录 1. antlr4是用来干什么的&#xff1f;2. 什么是lexer和parser&#xff1f;3. 使用antlr4生成某语言的lexer和parser的具体过程4. 其他 1. antlr4是用来干什么的&#xff1f; 是用来生成某语言lexer和parser的。 通俗点说&#xff0c;就是输入一个语言的规则描述文件&…...

编程日记 2024/5/10 23:15:26

超级好用的C++实用库之文件目录操作

&#x1f4a1; 需要该C实用库源码的大佬们&#xff0c;可扫码关注文章末尾的微信公众号二维码&#xff0c;或搜索微信公众号“希望睿智”。添加关注后&#xff0c;输入消息“超级好用的C实用库”&#xff0c;即可获得源码的下载链接。 概述 文件和目录操作是操作系统层面上的基…...

编程日记 2024/5/10 23:13:23

结合kimi chat的爬虫实战思路

背景 想钻研一下项目组件&#xff0c;找找之后的学习方向。不能自以为是&#xff0c;所以借着网开源项目网站上公布的项目内容看一下&#xff0c;那些是我可以努力去学习的&#xff08;入门的&#xff09;。首先需要获取相关内容&#xff0c;于是爬取整理。 任务1&#xff1a…...

编程日记 2024/5/10 23:12:22

UnsupportedClassVersionError异常如何解决？

下面是异常报错的详细描述 java -version java version "17.0.11" 2024-04-16 LTS Java(TM) SE Runtime Environment (build 17.0.117-LTS-207) Java HotSpot(TM) 64-Bit Server VM (build 17.0.117-LTS-207, mixed mode, sharing) 环境变量已经是jdk17&#xff0c;但…...

编程日记 2024/5/10 23:11:20

LeetCode热题100｜动态规划Part.1｜70.爬楼梯、118.杨辉三角、198.打家劫舍

70.爬楼梯 代码随想录原题&#xff0c;看这篇文章&#xff1a;C动态规划Part.1|动态规划理论基础、509.斐波那契数、70.爬楼梯、746.使用最小花费爬楼梯 118.杨辉三角 题目链接&#xff1a;118.杨辉三角 一刷代码 时间复杂度和空间复杂度都造到 O ( n u m R o w s 2 ) O(num…...

编程日记 2024/5/10 23:10:19

python 根据网址和关键词批量下载影像

最近用到了GLASS的LAI产品&#xff0c;但这个产品的文件夹分得很细&#xff0c;我需要的影像又有8个瓦片&#xff0c;一个一个点击很麻烦&#xff0c;于是探索了批量下载的方法 一、下载1幅 import requests import re import os import requests import re# 网页URLurl &…...

编程日记 2024/5/10 23:06:15

爬虫-无限debug场景 解决方式

解决无限debug 场景1 1. 鼠标右键 选择 continue to here&#xff08;此处不停留&#xff09;2. 鼠标右键 选择 edite breakpoint 设置 10 保证条件不成立 这行永远不执行3.方法置空 1. 方法调用加断点2. 控制台 setInterval function name() {}4. 替换文件 5. hoo…...

编程日记 2024/5/10 23:04:13

[链表专题]力扣206, 203, 19

1. 力扣206 : 反转链表 (1). 题 : 图略 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。示例 1&#xff1a;输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 示例 2&#xff1a;输入&#xff1a;head [1,2] 输出&#x…...

编程日记 2024/5/10 23:03:11

秋招后端开发面试题 - MySQL基础

目录 MySQL基础前言面试题MySQL 基础篇Mysql 的基础架构&#xff1f;MySQL 的长连接和短连接长连接引起的异常重启问题&#xff1f;说一下 MySQL 执行一条查询语句的内部执行过程&#xff1f;MySQL 查询缓存的功能有何优缺点&#xff1f;MySQL 的常用引擎都有哪些&#xff1f;I…...

编程日记 2024/5/10 23:01:09

力扣每日一题113：路径总和||

题目 中等 给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [5,4,8,11,null,13,4,7,2,null,null,5,1], targetSu…...

编程日记 2024/5/10 23:00:07

Thinkphp5 中常见的session 操作方法

在 ThinkPHP 框架中&#xff0c;session 是用于在多个页面或请求之间存储用户信息的机制。以下是在 ThinkPHP 中进行 session 常见操作的一些示例&#xff1a; 启动 Session 在 ThinkPHP 中&#xff0c;通常不需要手动启动 Session&#xff0c;因为框架会在应用启动时自动处理…...

编程日记 2024/5/10 22:57:04

inBuilder 低代码平台新特性推荐 - 第十八期

今天来给大家带来的是inBuilder低代码平台特性推荐系列第十八期——表单设计器集成预约日历组件。 一、场景介绍 项目上希望用日历的形式展示某地点在一段时间内的预约记录&#xff0c;表单设计器新增支持创建日历预约视图&#xff0c;并配置预约属性。 二、运行效果 三、前…...

编程日记 2024/5/10 22:55:02

部署xwiki服务需要配置 hibernate.cfg.xml如何配置？

1. 定位 hibernate.cfg.xml 文件 首先&#xff0c;确保您可以在 Tomcat 的 XWiki 部署目录中找到 hibernate.cfg.xml 文件&#xff1a; cd /opt/tomcat/latest/webapps/xwiki/WEB-INF ls -l hibernate.cfg.xml如果文件存在&#xff0c;您可以继续编辑它。如果不存在&#xff…...

编程日记 2024/5/10 22:51:59

1376：信使(msner)

【解题思路】 每个哨所是一个顶点&#xff0c;哨所与哨所之间的通信线路为边&#xff0c;两哨所间通讯花费的时间为边的权值。记第一个哨所为顶点s&#xff0c;信息从第一个哨所传递到表示为顶点x的某哨所可能有多条路径&#xff0c;每条传送路径有一个花费的时间&…...

编程日记 2024/5/10 22:50:58

Hadoop3：HDFS的架构组成

一、官方文档 我这里学习的是Hadoop3.1.3版本&#xff0c;所以&#xff0c;查看的也是3.1.3版本的文档 Architecture模块最下面 二、HDFS架构介绍 HDFS架构的主要组成部分&#xff0c;是一下四个部分 1、NameNode(NN) 就是Master节点&#xff0c;它是集群管理者。 1、管…...

编程日记 2024/5/10 22:49:56

P2910 [USACO08OPEN] Clear And Present Danger S

Problem: P2910 [USACO08OPEN] Clear And Present Danger S 文章目录 思路解题方法复杂度Code 思路 这是一个图论问题&#xff0c;我们需要找到从一个城市到另一个城市的最短路径。我们可以使用Floyd-Warshall算法来解决这个问题。首先&#xff0c;我们需要构建一个距离矩阵&am…...

编程日记 2024/5/10 22:48:55

ES6 对象方面的新特性

ES6&#xff08;ECMAScript 2015&#xff09;为JavaScript语言增加了很多新特性&#xff0c;包括对象字面量属性的简写、计算属性名、方法的简写、对象的解构赋值、Object.assign()方法复制对象属性、Object.is()比较两个值等。以下是一些在ES6中经常使用的对象方法&#xff1a…...

编程日记 2024/5/10 22:47:54

GO语言核心30讲 进阶技术 (第一部分)

原站地址&#xff1a;Go语言核心36讲_Golang_Go语言-极客时间 一、数组和切片 1. 两者最大的不同&#xff1a;数组的长度是固定的&#xff0c;而切片的长度是可变的。 2. 可以把切片看成是对数组的一层封装&#xff0c;因为每个切片的底层数据结构中&#xff0c;一定会包含一…...

编程日记 2024/5/10 22:46:52

Chrome密码一键提取：3分钟找回所有浏览器保存的密码

Chrome密码一键提取&#xff1a;3分钟找回所有浏览器保存的密码 【免费下载链接】chromepass Get all passwords stored by Chrome on WINDOWS. 项目地址: https://gitcode.com/gh_mirrors/chr/chromepass 你是否曾经因为忘记某个重要网站的登录密码而感到焦虑&#xff…...

编程新知 2026/3/31 21:04:47

OWL ADVENTURE 作业批改场景应用：自动识别手写算式与批阅

OWL ADVENTURE 作业批改场景应用&#xff1a;自动识别手写算式与批阅 1. 引言 想象一下&#xff0c;一位数学老师晚上十点还在台灯下&#xff0c;面前堆着厚厚一摞作业本&#xff0c;需要逐题检查、打勾、画叉&#xff0c;再写上评语。日复一日&#xff0c;这种重复性劳动不仅…...

编程新知 2026/3/31 20:29:57

别再手动点灯了！用Simulink串口实时控制STM32，5分钟搞定双向通信

基于Simulink与STM32的实时双向通信实战指南 在嵌入式系统开发中&#xff0c;快速原型验证是提升效率的关键环节。传统开发模式下&#xff0c;工程师需要花费大量时间编写底层通信协议、调试硬件接口&#xff0c;而真正核心的控制算法验证反而被边缘化。本文将介绍一种高效开发…...

编程新知 2026/3/31 20:09:38

手把手教你用Qt6和Arduino Uno打造实时数据监控面板（附串口数据粘包处理源码）

基于Qt6与Arduino Uno的工业级数据可视化系统开发实战 在工业物联网和智能硬件开发领域&#xff0c;实时数据监控是核心需求之一。想象一下这样的场景&#xff1a;车间里的温度传感器阵列通过Arduino采集数据&#xff0c;工程师在办公室的PC端就能实时查看温度曲线波动&#x…...

编程新知 2026/3/31 19:18:54

别再只用#if DEBUG了！C#预处理器指令的5个实战妙用（含#warning、#pragma避坑）

别再只用#if DEBUG了&#xff01;C#预处理器指令的5个实战妙用&#xff08;含#warning、#pragma避坑&#xff09; 在C#开发中&#xff0c;预处理器指令往往被简化为#if DEBUG的单一用途&#xff0c;这就像只把瑞士军刀当作开瓶器使用。实际上&#xff0c;这套工具能在代码质量管…...

编程新知 2026/3/31 19:08:32

深入解析 vSphere 7 vMotion 迁移实战：从单中心到跨中心的无缝迁移策略

1. vMotion迁移的核心价值与场景定位 当你凌晨三点接到机房断电预警电话时&#xff0c;vMotion可能是你最想拥抱的技术。作为vSphere的"灵魂功能"之一&#xff0c;vMotion允许我们将运行中的虚拟机在不同主机间无缝迁移&#xff0c;就像给飞行中的飞机更换引擎——用…...

编程新知 2026/3/31 19:06:31

深蓝词库转换终极指南：30+输入法格式一键互转教程

深蓝词库转换终极指南&#xff1a;30输入法格式一键互转教程 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 深蓝词库转换&#xff08;imewlconverter&#xff09;是…...

编程新知 2026/3/31 18:54:19

从‘它怎么又挂了’到‘服务稳如狗’：我是如何用Prometheus+Grafana搭建业务监控看板的

从被动救火到主动防御&#xff1a;PrometheusGrafana构建业务监控实战手册 凌晨三点&#xff0c;手机突然响起刺耳的警报声——这已经是本周第三次了。揉着惺忪的睡眼查看日志&#xff0c;却发现关键线索早已被淹没在海量的调试信息中。这样的场景对于中小技术团队来说再熟悉不…...

编程新知 2026/3/31 18:48:18

终极指南：如何将Squire富文本编辑器与现代前端工具链完美集成

终极指南&#xff1a;如何将Squire富文本编辑器与现代前端工具链完美集成 【免费下载链接】Squire The rich text editor for arbitrary HTML. 项目地址: https://gitcode.com/gh_mirrors/sq/Squire Squire是一个轻量级、高性能的HTML5富文本编辑器&#xff0c;专为处理…...

编程新知 2026/3/31 17:45:32

Ollama部署LFM2.5-1.2B-Thinking：1.2B模型如何实现媲美7B的推理质量？

Ollama部署LFM2.5-1.2B-Thinking&#xff1a;1.2B模型如何实现媲美7B的推理质量&#xff1f; 最近在玩各种本地大模型的朋友&#xff0c;可能都听过一个说法&#xff1a;模型参数越大&#xff0c;效果越好。这听起来很合理&#xff0c;毕竟7B、13B甚至70B的模型&#xff0c;能…...

编程新知 2026/3/31 17:21:07