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

HTML5 弹跳动画（Bounce Animation）详解

news 2026/1/12 7:22:40

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

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/1/12 6:09:36

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/1/9 7:20:27

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/12/21 4:14:07

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

React从基础入门到高级实战：React 实战项目 - 项目五：微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

编程新知 2025/10/18 20:50:06