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

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

news 2025/7/9 10:51:33

输入时字符跳动动画实现

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

技术方案概述

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

关键技术点

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

实现步骤

定义字符跳动的动画

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

@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;
}#input-box {/* ...省略无关样式... */opacity: 0; /* 让输入框透明，但仍可输入 */
}#animated-text {/* ...省略无关样式... */
}

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相结合的强大功能。对于开发者来说，掌握这类交互效果的实现方法可以更好地为用户创建吸引人的前端体验。

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

输入时字符跳动动画实现

技术方案概述

关键技术点

实现步骤

DEMO

总结

相关文章：

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

C语言面试重点问题

antlr4略解

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

结合kimi chat的爬虫实战思路

UnsupportedClassVersionError异常如何解决？

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

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

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

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

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

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

Thinkphp5 中常见的session 操作方法

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

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

1376：信使(msner)

Hadoop3：HDFS的架构组成

P2910 [USACO08OPEN] Clear And Present Danger S

ES6 对象方面的新特性

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

XML Group端口详解

使用VSCode开发Django指南

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

Objective-C常用命名规范总结

css3笔记（1）自用

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

10-Oracle 23 ai Vector Search 概述和参数

云原生玩法三问：构建自定义开发环境

九天毕昇深度学习平台 | 如何安装库？