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

HTML5 弹跳动画（Bounce Animation）详解

news 2025/6/17 4:08:28

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/6/16 18:43:10

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/6/16 23:24:18

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/6/15 3:58:44

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/6/15 20:32:53

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/6/15 23:22:48

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/6/16 23:57:31

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/6/17 1:44:29

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/6/17 3:36:41

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/6/16 21:55:53

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/6/16 14:45:30