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

HTML5 弹跳动画（Bounce Animation）详解

news 2026/4/12 3:41:23

HTML5 弹跳动画（Bounce Animation）详解

弹跳动画是一种动态效果，使元素在出现或消失时看起来像是在跳动。这种效果可以通过 CSS 动画或 JavaScript 来实现，增强用户体验。

1. 使用 CSS 实现弹跳动画

可以使用 CSS 的 @keyframes 来定义弹跳效果，并通过 animation 属性将其应用到元素上。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹跳动画示例</title><style>@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-30px); /* 向上弹跳 */}60% {transform: translateY(-15px); /* 向上弹跳 */}}.bounce {display: inline-block;animation: bounce 1s infinite; /* 无限循环弹跳 */}</style>
</head>
<body><h1 class="bounce">我在弹跳！</h1></body>
</html>
2. 使用 JavaScript 实现弹跳动画

如果您需要更复杂的控制（如在特定事件下触发弹跳），可以使用 JavaScript。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹跳动画示例</title><style>@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-30px); /* 向上弹跳 */}60% {transform: translateY(-15px); /* 向上弹跳 */}}.bounce {display: inline-block;}</style>
</head>
<body><div class="bounce" id="bounceElement">点击我弹跳</div><script>const bounceElement = document.getElementById('bounceElement');bounceElement.addEventListener('click', () => {bounceElement.style.animation = 'bounce 1s'; // 添加弹跳动画bounceElement.addEventListener('animationend', () => {bounceElement.style.animation = ''; // 动画结束后清除动画});});</script></body>
</html>

总结

  • CSS 方法：适合简单的弹跳效果，容易实现并且效果流畅。
  • JavaScript 方法：提供更大的灵活性，可以在用户交互时动态控制弹跳效果。

通过上述方法，您可以轻松实现元素的弹跳动画效果，使网页更加生动有趣。

相关文章：

HTML5 弹跳动画（Bounce Animation）详解

HTML5 弹跳动画&#xff08;Bounce Animation&#xff09;详解 弹跳动画是一种动态效果&#xff0c;使元素在出现或消失时看起来像是在跳动。这种效果可以通过 CSS 动画或 JavaScript 来实现&#xff0c;增强用户体验。 1. 使用 CSS 实现弹跳动画 可以使用 CSS 的 keyframes…...

编程日记 2025/1/8 12:21:11

4.1.3 串

文章目录 串的基本概念串的基本操作串的存储结构 串的基本概念 串&#xff0c;仅由字符构成的有限序列。 串长&#xff1a;串中的字符个数。空串&#xff1a;长度为0的串。空格串&#xff1a;一个或多个空格构成的串。子串&#xff1a;串中任意长度连续字符构成的序列。含有字…...

编程日记 2025/1/8 12:19:07

国产编辑器EverEdit - 两种删除空白行的方法

1 使用技巧&#xff1a;删除空白行 1.1 应用场景 用户在编辑文档时&#xff0c;可能会遇到很多空白行需要删除的情况&#xff0c;比如从网页上拷贝文字&#xff0c;可能就会存在大量的空白行要删除。 1.2 使用方法 1.2.1 方法1&#xff1a; 使用编辑主菜单 选择主菜单编辑 …...

编程日记 2025/1/8 12:16:03

1月7日星期二今日早报简报微语报早读

1月7日星期二&#xff0c;农历腊月初八&#xff0c;早报#微语早读。 1、公安部&#xff1a;已为一线民警配备执法记录仪130万余部&#xff0c;规范现场执法&#xff1b; 2、浙江提出2035年全省域基本实现共同富裕&#xff1b; 3、“汕头牛肉丸”有新标准&#xff01;1月6日起…...

编程日记 2025/1/8 12:15:02

随机置矩阵列为0[矩阵乘法pytorch版]

文章目录 1. 举例&#xff1a;2. python 代码 1. 举例&#xff1a; A [ 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 ] , r a n d [ 0 , 5 , 2 ] → A [ 0 1 0 3 4 0 6 7 0 9…...

编程日记 2025/1/8 12:13:00

C# 中mysql数据库，已经在原有数据库升级数据库脚本，去管理可以一次，和多次执行的，nuget包

在C#中&#xff0c;如果你需要管理数据库升级脚本&#xff0c;并且希望这些脚本能够支持一次执行和多次执行&#xff08;即幂等性&#xff09;&#xff0c;你可以使用一些现成的NuGet包来简化这个过程。以下是一些常用的NuGet包&#xff1a; 1. DbUp 描述: DbUp 是一个轻量级…...

编程日记 2025/1/8 12:11:58

PCL 分段线性函数

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 假设我们有一个分段线性函数，并且我们希望在某个区间内对这个函数进行均匀采样，生成一系列的点。相对通用一些的思路就是对这个函数进行参数化，方法有很多，这在其他的博客中也有提到，不过PCL也为我们提供了一种…...

编程日记 2025/1/8 12:10:54

王静波页岩气：工厂蜕变的创业传奇

【小说】上世纪90年代&#xff0c;西部某工业园区的一家化工厂正面临着生存危机。厂里的锅炉设备老旧&#xff0c;煤炭价格飞涨&#xff0c;能源成本几乎压垮了生产线。王静波是这家工厂的技术主管&#xff0c;眼看工厂一天比一天萧条&#xff0c;他心里焦急万分&#xff0c;却…...

编程日记 2025/1/8 12:09:52

php反序列化 ctf例题演示 框架安全（TP,Yii,Laravel） phpggc生成框架利用pop

前言 php反序列化的框架的利用的pop是非常难写的 并且 我们不知道他的利用方法 所以PHPGGC是一个包含unserialize()有效载荷的库以及一个从命令行或以编程方式生成它们的工具。当在您没有代码的网站上遇到反序列化时&#xff0c;或者只是在尝试构建漏洞时&#xff0c;此工具…...

编程日记 2025/1/8 12:08:50

Koi技术教程-Tauri基础教程-第二节 Tauri的核心概念上

1 “你日渐平庸&#xff0c;甘于平庸&#xff0c;将继续平庸。”——《以自己喜欢的方式过一生》 2. “总是有人要赢的&#xff0c;那为什么不能是我呢?”——科比布莱恩特 3. “你那么憎恨那些人&#xff0c;和他们斗了那么久&#xff0c;最终却要变得和他们一样&#xff0c;…...

编程日记 2025/1/8 12:03:43

入门网络安全工程师要学习哪些内容【2025年寒假最新学习计划】

&#x1f91f; 基于入门网络安全/黑客打造的&#xff1a;&#x1f449;黑客&网络安全入门&进阶学习资源包 大家都知道网络安全行业很火&#xff0c;这个行业因为国家政策趋势正在大力发展&#xff0c;大有可为!但很多人对网络安全工程师还是不了解&#xff0c;不知道网…...

编程日记 2025/1/8 12:02:37

vulnhub靶场【DC系列】之5

前言 靶机&#xff1a;DC-5&#xff0c;IP地址为192.168.10.4 攻击&#xff1a;kali&#xff0c;IP地址为192.168.10.2 都采用VMWare&#xff0c;网卡为桥接模式 对于文章中涉及到的靶场以及工具&#xff0c;我放置网盘中https://pan.quark.cn/s/2fcf53ade985 主机发现 使用…...

编程日记 2025/1/8 12:01:33

前端面试题合集

1.有哪些方式可以实现数据的实时更新&#xff1f; 一. AJAX轮询&#xff08;Polling&#xff09; 轮询是一种通过定时发送HTTP请求到服务器来检查数据更新的方法。客户端每隔一定时间&#xff08;如每5秒&#xff09;发送一个请求到服务器&#xff0c;服务器响应当前的数据状态…...

编程日记 2025/1/8 12:00:32

基于RK3568/RK3588大车360度环视影像主动安全行车辅助系统解决方案，支持ADAS/DMS

产品设计初衷 HS-P2-2D是一款针对大车盲区开发的360度全景影像 安全行车辅助系统&#xff0c;通过车身四周安装的超广角像机&#xff0c;经算法合成全景鸟瞰图&#xff0c;通过鸟瞰图&#xff0c;司机非常清楚的看清楚车辆四周情况&#xff0c;大大降低盲区引发的交通事故。 产…...

编程日记 2025/1/8 11:59:31

基于 GEE Sentinel-1 数据集提取水体

目录 1 水体提取原理 2 完整代码 3 运行结果 1 水体提取原理 水体提取是地理信息和遥感技术的关键应用之一&#xff0c;对于多个领域都具有重要的应用价值。它有助于更好地管理水资源&#xff0c;保护环境&#xff0c;减少灾害风险&#xff0c;促进可持续发展&#xff0c;以…...

编程日记 2025/1/8 11:58:27

Python判断、循环练习

01 02 03...

编程日记 2025/1/8 11:56:23

【简博士统计学习方法】第1章：4. 模型的评估与选择

4. 模型的评估与选择 4.1 训练误差与测试误差 假如存在样本容量为 N N N的训练集&#xff0c;将训练集送入学习系统可以训练学习得到一个模型&#xff0c;我们将这么模型用决策函数的形式表达&#xff0c;也就是 y f ^ ( x ) y\hat{f}(x) yf^​(x)&#xff0c;关于模型的拟合…...

编程日记 2025/1/8 11:55:22

解密Navicat密码（Java）

最近从Navicat换到了DBeaver&#xff0c;导出配置文件发现配置文件里的密码都是加密的&#xff0c;看网上的都是给的PHP代码&#xff0c;因为环境问题&#xff0c;就算是在线上运行的PHP代码也会报错&#xff0c;所以就把这段代码改成Java了。 package com.unicdata.system.con…...

编程日记 2025/1/8 11:52:19

某聘__zp_stoken__参数逆向还原

声明 本文章中所有内容仅供学习交流&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01; 目标网站 aHR0cHM6Ly93d3cuemhpcGluLmNvbS93ZWIvZ2Vlay9qb2I/cXVlcnk9cHl0aG9uJm…...

编程日记 2025/1/8 11:48:14

【数据可视化-11】全国大学数据可视化分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

编程日记 2025/1/8 11:47:13

打字不如说话，说话不如截图——AI 代码助手的多模态输入实践祷

整体排查思路 我们的目标是验证以下三个环节是否正常&#xff1a; 登录成功时&#xff1a;服务器是否正确生成了Session并返回了包含正确 JSESSIONID的Cookie给浏览器。 浏览器端&#xff1a;浏览器是否成功接收并存储了该Cookie。 后续请求&#xff1a;浏览器在执行查询等操作…...

编程新知 2026/4/12 3:40:27

Spring Boot 缓存注解的实现原理

Spring Boot缓存注解的实现原理 在现代Web应用中&#xff0c;缓存是提升系统性能的重要手段之一。Spring Boot通过简洁的注解方式&#xff0c;为开发者提供了便捷的缓存功能&#xff0c;其底层实现原理既高效又灵活。本文将深入探讨Spring Boot缓存注解的核心机制&#xff0c;…...

编程新知 2026/4/11 22:04:41

GreaterWMS 开源库存管理系统深度解析：现代化仓储管理的架构与实践指南

GreaterWMS 开源库存管理系统深度解析&#xff1a;现代化仓储管理的架构与实践指南 【免费下载链接】GreaterWMS This Inventory management system is the currently Ford Asia Pacific after-sales logistics warehousing supply chain process . After I leave Ford , I sta…...

编程新知 2026/4/11 21:40:03

4.2《深入理解内存池（Memory Pool）与内存块（Memory Slab）设计与实现》

001、内存管理基础：从malloc/free到自定义内存管理器的必要性 一、从一次深夜调试说起 上周排查一个嵌入式设备偶发性死机问题，日志停在某行动态分配代码后消失。堆内存碎片化了——连续运行十几小时后，8MB的堆剩余总量还有3MB，但就是无法分配出一个连续的50KB缓冲区。设备…...

编程新知 2026/4/11 21:37:53

别再复制粘贴了！手把手教你用TypeScript封装一个企业级axios请求库（附完整源码）

从零构建高可维护的TypeScript请求库&#xff1a;axios企业级封装实战 每次在Vue3项目中新建一个页面&#xff0c;你是否习惯性打开旧项目复制粘贴网络请求代码&#xff1f;当接口字段变更时&#xff0c;是否需要在十几个文件中逐个修改错误处理逻辑&#xff1f;这种重复劳动不…...

编程新知 2026/4/11 20:46:38

Steam Economy Enhancer：如何5分钟提升Steam交易效率87%的完整指南

Steam Economy Enhancer&#xff1a;如何5分钟提升Steam交易效率87%的完整指南 【免费下载链接】Steam-Economy-Enhancer 中文版&#xff1a;Enhances the Steam Inventory and Steam Market. 项目地址: https://gitcode.com/gh_mirrors/ste/Steam-Economy-Enhancer 还在…...

编程新知 2026/4/11 18:38:44

Vivado IP核实战：复数浮点乘法器的FPGA实现与精度分析

1. 复数浮点乘法器的工程背景与核心挑战 在数字信号处理领域&#xff0c;复数浮点运算堪称算法实现的"心脏"。特别是在通信系统的信道均衡、雷达信号处理等场景中&#xff0c;每秒需要完成数百万次复数乘法运算。传统DSP处理器受限于顺序执行架构&#xff0c;难以满足…...

编程新知 2026/4/11 18:06:22

高性能PCB逆向工程工具：OpenBoardView企业级电路板分析架构解析

高性能PCB逆向工程工具&#xff1a;OpenBoardView企业级电路板分析架构解析 【免费下载链接】OpenBoardView View .brd files 项目地址: https://gitcode.com/gh_mirrors/op/OpenBoardView OpenBoardView是一款面向硬件工程师和PCB逆向工程的专业级开源电路板文件查看器…...

编程新知 2026/4/11 17:01:29

GHelper终极指南：5步解锁华硕笔记本隐藏性能，告别Armoury Crate臃肿

GHelper终极指南&#xff1a;5步解锁华硕笔记本隐藏性能&#xff0c;告别Armoury Crate臃肿 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyr…...

编程新知 2026/4/11 13:08:39

深度学习学习算法的三要素 —— 任务、性能与经验（十五）

1. 定位导航 前 14 篇完成了所有数学基础——线性代数、概率与信息论、数值计算。从本篇开始，正式进入机器学习和深度学习的核心内容。 Mitchell 在 1997 年给出了机器学习的经典定义： “对于某类任务 TTT 和性能度量 PPP，一个计算机程序被认为可以从经验...

编程新知 2026/4/11 13:06:39