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

HTML5 弹跳动画（Bounce Animation）详解

news 来源：原创 2025/5/7 2:40:58

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 弹跳动画（Bounce Animation）详解弹跳动画是一种动态效果，使元素在出现或消失时看起来像是在跳动。这种效果可以通过 CSS 动画或 JavaScript 来实现，增强用户体验。 1. 使用 CSS 实现弹跳动画可以使用 CSS 的 keyframes…...

编程日记 2025/5/7 2:40:58

Python 模拟登录网页，或者编写爬虫时模拟登录的详细总结

参考 Python模拟登陆网页的三种方法_python模拟登录-CSDN博客 python-模拟登陆多种方法总结_python模拟登录-CSDN博客 Python模拟登录的几种方法_实现模拟登录的方式有哪些?-CSDN博客 Python爬虫——模拟登录_python 模拟登录-CSDN博客 Python3 爬虫模拟登录_python模拟登录网…...

编程日记 2025/4/28 17:53:00

若依框架简介

若依（RuoYi）框架是一个基于Java语言的后台管理系统快速开发框架，它结合了多种前端和后端技术，提供了高效的开发工具。以下是对若依框架的详细解析： 一、技术架构后端：若依框架后端采用了Spring Boot、My…...

编程日记 2025/5/7 0:00:46

Linux中rsync命令使用

一、rsync简介 rsync 是一种高效的文件复制和同步工具，常用于在本地或远程计算机之间同步文件和目录主要特性增量同步：rsync 会检测源和目标文件之间的差异，只传输发生变化的部分，而不是重新传输整个文件。这样就能有效减少数据…...

编程日记 2025/5/4 20:45:11

opencv 学习(1)

文章目录 opencv导学部分opencv的作用ffmpeg和 opencv的关系opencv的未来计算机视觉是什么？ opencv导学部分 opencv的作用 1 : 目标识别人脸识别车辆识别 2 : 自动驾驶技术 – 计算机视觉进行车道的检测 3 : 医学图像分析通过分析光片来分析人到底得了什么病…...

编程日记 2025/5/7 1:03:24

中高级运维工程师运维面试题（十一）之 Docker

目录往期回顾前言基础知识1. 什么是 Docker？2. Docker 的核心组件有哪些？3. Docker 镜像和容器有什么区别？4. 什么是 Dockerfile？ 高级知识5. 什么是多阶段构建？如何使用？6. Docker 网络有哪些模式&#x…...

编程日记 2025/5/1 6:39:25

Kafka如何实现顺序消费？

Kafka的消息是存储在指定的topic中的某个partition中的。并且一个topic是可以有多个partition的。同一个partition中的消息是有序的，但是跨partition，或者跨topic的消息就是无序的了。为什么同一个partition的消息是有序的? 因为当生产者向某个parti…...

编程日记 2025/5/2 23:17:12

通过 ulimit 和 sysctl 调整Linux系统性能

目录一：资源限制管理工具：ulimit1、ulimit 作用介绍2、ulimit 常用选项3、ulimit 配置文件二：内核参数调整工具：sysctl1、sysctl 作用介绍2、sysctl 常用选项3、sysctl 配置文件一：资源限制管理工具：uli…...

编程日记 2025/4/24 5:31:33

pandas基础使用

pandas基础使用基本介绍类似于字典形式的numpy，可以给它的不同行和不同列进行重命名。 import numpy as np import pandas as pd # 创建一个序列 s pd.Series([1,4,True,np.nan,55.0])创建date format日期矩阵 import numpy as np import pandas as pd dates…...

编程日记 2025/4/26 17:33:07

2024.1.5总结

今日不开心:这周本来想花点时间学习的，没想到全都花在刷视频，外出消费去了。今日思考: 1.找对象这件事确实不能强求，顺其自然吧，单身和不单身，其实，各有各的利弊。在一次坐地铁的过程中，我一…...

编程日记 2025/5/3 20:30:58

解释一下：运放的输入偏置电流

输入偏置电流首先看基础部分：这就是同相比例放大器按照理论计算，输入VIN=0时，输出VOUT应为0，对吧仿真与理论差距较大，有200多毫伏的偏差，这就是输入偏置电流IBIAS引起的，接着看它的定义同向和反向输入电流的平均值，也就是Ib1、Ib2求平均，即（Ib1+Ib2）/2 按照下面…...

编程日记 2025/4/28 17:44:59

Federation机制的实现

1.关闭Hadoop的HDFS和YARN，依次执行“stop-yarn.sh”和“stop-dfs.sh”命令关闭Hadoop的YARN和HDFS。 2.删除3台虚拟机上的临时文件： 3.修改hdfs-site.xml配置文件，进入虚拟机liumengting1的/export/servers/hadoop-3.3.4/etc/hadoop目录&…...

编程日记 2025/5/3 10:55:14

120.Jenkins里的Pipeline Script

目录 1. **Declarative Pipeline** 主要部分示例 2. **Scripted Pipeline** 主要部分示例 3. **常用指令和功能** 环境变量工具管理文件操作构建触发器并行执行异常处理用户交互 4.**两种类型的特点** 1. **声明式 Pipeline (Declarative Pipeline)** 中…...

编程日记 2025/5/3 14:51:55

SpringBoot3-整合WebSocket指南

更多SpringBoot3内容请关注我的专栏：《SpringBoot3》期待您的点赞👍收藏⭐评论✍ SpringBoot3-整合WebSocket指南 1. 什么是WebSocket?2. 环境准备2.1 项目依赖 3. WebSocket配置3.1 WebSocket配置类3.2 自定义WebSocket处理器 4. 控制器5. 前端实现5.…...

编程日记 2025/5/1 1:03:49

【npm依赖包介绍】借助rimraf依赖包，在用npm run build构建项目时，清空dist目录，避免新旧混合

文章目录背景如何使用附上rimraf的介绍和说明主要作用使用场景安装使用示例异步删除同步删除参考资料背景在npm run build时，一般都会清空项目中已有的dist目录再构建，避免新旧混合。如何使用可以简单使用rimraf这个npm依赖包。目前rimraf的最…...

编程日记 2025/5/4 7:56:37

python学opencv|读取图像（二十四）使用cv2.putText()绘制文字进阶-倾斜文字

【1】引言前述学习进程中，我们已经掌握了pythonopencv绘制文字的基本技能，相关链接为： python学opencv|读取图像（二十三）使用cv2.putText()绘制文字-CSDN博客在这里，我们使用不同的字体、线条颜色和线…...

编程日记 2025/5/4 21:33:23

【简博士统计学习方法】第1章：3. 统计学习方法的三要素

3. 统计学习方法的三要素 3.1 监督学习的三要素 3.1.1 模型假设空间（Hypothesis Space）：所有可能的条件概率分布或决策函数，用 F \mathcal{F} F表示。若定义为决策函数的集合： F { f ∣ Y f ( X ) } \mathcal{F…...

编程日记 2025/5/5 0:09:18

“AI智慧语言训练系统：让语言学习变得更简单有趣

大家好，我是你们的老朋友，一个热衷于探讨科技与教育结合的产品经理。今天，我想和大家聊聊一个让语言学习变得不再头疼的话题——AI智慧语言训练系统。这个系统可是我们语言学习者的福音，让我们一起来揭开它的神秘面纱吧&#xff0…...

编程日记 2025/5/6 15:07:42

机器学习笔记 - 单幅图像深度估计的最新技术

1、深度估计简述单眼深度估计是一项计算机视觉任务，AI 模型从单个图像中预测场景的深度信息。模型估计场景中对象从一个照相机视点的距离。单目深度估计已广泛用于自动驾驶、机器人等领域。深度估计被认为是最困难的计算机视觉任务之一，因为它要求模型理解对象及其深度信息之…...

编程日记 2025/5/3 20:07:26

洛谷：P1540 [NOIP2010 提高组] 机器翻译

[NOIP2010 提高组] 机器翻译题目背景 NOIP2010 提高组 T1 题目描述小晨的电脑上安装了一个机器翻译软件，他经常用这个软件来翻译英语文章。这个翻译软件的原理很简单，它只是从头到尾，依次将每个英文单词用对应的中文含义来替换。对于…...

编程日记 2025/5/2 17:19:50

2025第2周 | JavaScript中的函数的参数默认值和剩余参数

目录 1. 函数的默认值1.1 ES5的时候默认值写法1.2 es6的默认值1.3 babel转换之后1.4 有默认值的参数建议放到最后1.5 有默认值的函数length属性 2. 参数为对象时默认值及解构2.1 默认值和解构一起使用2.2 默认值为一个空对象 3. 剩余参数3.1 剩余参数必须放到最后3.2 剩余参数和…...

编程日记 2025/5/6 12:42:42

Unity学习之UGUI（三）

十二、Slider 1、作用 Slider是滑动条组件，是UGUI中用于处理滑动条相关交互的关键组件创建Slider默认包括4个对象父对象：Slider组件依附的对象子对象：背景图，进度图，滑动块三组对象 2、主要参数 3、代码控制 voi…...

编程日记 2025/5/1 17:20:44

分享3个国内使用正版GPT的网站【亲测有效！2025最新】

1. molica 传送入口：https://ai-to.cn/url/?umolica 2. 多帮AI 传送入口：https://aigc.openaicloud.cn?inVitecodeMYAAGGKXVK 3. 厉害猫传送入口：https://ai-to.cn/url/?ulihaimao...

编程日记 2025/5/5 6:04:49

ffmpeg-avio实战：打开本地文件或者网络直播流dome

使用ffmpeg打开打开本地文件或者网络直播流的一个小dome。流程产靠ffmpeg4.x系列的解码流程-CSDN博客 #include <libavcodec/avcodec.h> #include <libavformat/avformat.h> #include <libavformat/avio.h> #include <libavutil/file.h> #include &l…...

编程日记 2025/5/1 5:54:56

三维管线管网自动化建模工具MagicPipe3D V3.6.0

经纬管网建模系统MagicPipe3D，本地离线参数化构建地下管网三维模型（包括管道、接头、附属设施等），输出标准3DTiles、Obj模型等格式，支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、语义查询、专题分析。欢迎…...

编程日记 2025/5/5 1:26:35

设计基于检索增强生成的个性化语言模型（RAG-based LLM）

设计基于检索增强生成的个性化语言模型（RAG-based LLM） 引言在当今快速发展的自然语言处理技术中，生成式预训练模型（LLM）对个性化和可靠结果的需求不断增加。为了满足这种需求，基于检索增强生成&#xf…...

编程日记 2025/5/6 3:32:35

Oracle Dataguard（主库为单节点）配置详解（5）：使用 rman 复制技术（DUPLICATE）同步主库到备库

Oracle Dataguard（主库为单节点）配置详解（5）：使用 rman 复制技术（DUPLICATE）同步主库到备库目录 Oracle Dataguard（主库为单节点）配置详解（5）&am…...

编程日记 2025/5/3 17:24:35

119.使用AI Agent解决问题：Jenkins build Pipeline时，提示npm ERR! errno FETCH_ERROR

目录 1.Jenkins Build时的错误 2.百度文心快码AI智能体帮我解决提问1：jenkins中如何配置npm的源提问2：jenkins pipeline 类型为pipeline script from SCM时，如何配置npm源 3.最终解决方法-Jenkinsfile的修改 4.感触 1.Jenkins Build时…...

编程日记 2025/5/5 10:56:47

回归预测 | MATLAB实ELM-Adaboost多输入单输出回归预测

回归预测 | MATLAB实ELM-Adaboost多输入单输出回归预测目录回归预测 | MATLAB实ELM-Adaboost多输入单输出回归预测预测效果基本介绍程序设计参考资料预测效果基本介绍一、极限学习机（ELM） 极限学习机是一种单层前馈神经网络，具有训练速…...

编程日记 2025/5/1 4:50:21

服务器漏洞修复解决方案

漏洞1、远程桌面授权服务启用检测【原理扫描】 Windows Remote Desktop Licensing Service is running: Get Server version: 0x60000604 1、解决方案：建议禁用相关服务避免目标被利用方法一：使用服务管理器打开“运行”对话框（WinR&am…...

编程日记 2025/4/27 13:12:31

Couldn‘t resolve host name for http://mirrorlist.centos.org

【问题】在CentOS8执行sudo yum update -y 软件包更新的时候报错 Errors during downloading metadata for repository appstream:- Curl error (6): Couldnt resolve host name for http://mirrorlist.centos.org/?release8-stream&archx86_64&repoAppStream&…...

编程日记 2025/5/2 9:24:36

Vue2：el-table中的文字根据内容改变颜色

想要实现的效果如图，【级别】和【P】列的颜色根据文字内容变化 1、正常创建表格 <template><el-table:data="tableData"style="width: 100%"><el-table-column prop="id" label="ID"/> <el-table-column …...

编程日记 2025/4/30 20:24:18

C++静态变量的使用方法？C++静态变量占用内存情况？拷贝构造函数会拷贝哪些内容？const使用注意

1.静态变量的使用函数中使用：静态变量初次声明并定义作为初始值，后续再次运行函数，基于上次的结果累加类中：类内声明，类外实现（如声明为const，特殊情况，可以类内直接声明时定义&am…...

编程日记 2025/5/5 12:43:21

Linux初识——基本指令

我们在linux下输入各种指令，其实就相当于在windows中的相关操作，比如双击，新建文件夹等。以下是相关基本指令基本用法一.ls（显示当前目录下的所有文件和目录） 那如何显示当前目录（我们所在的位置&…...

编程日记 2025/5/3 17:24:36

python 实现贪心算法（Greedy Algorithm）

贪心算法（Greedy Algorithm）是一种在每一步选择中都采取当前最优的选择，希望通过局部最优解达到全局最优解的算法设计方法。以下是使用Python实现贪心算法解决几个经典问题的示例： 1. 活动选择问题（Activity Selection…...

编程日记 2025/5/4 17:39:13

设计形成从业务特点到设计模式的关联

规范和指引在应用架构、数据架构等各架构方向上形成规范性约束指导。同一个决策要点、架构单元在统一的架构原则指导下，会因业务特点差异有不同的实现，经过总结形成了最佳实践。在开展新应用的设计时，根据决策要点以及相关的业务特点&#xf…...

编程日记 2025/5/2 3:07:29

Pytorch初学

创建虚拟环境 python控制台，jupyter notebook,python文件运行的差异，后续结合使用三者。 jupter主要可以对代码进行分割单独运行，主要做一些探索性工作。数据集的常见存储模式 1、以标签命名图像。 2、单独存储图像的地址。加载数据集…...

编程日记 2025/5/3 14:38:17

【动态重建】时间高斯分层的长体积视频

标题：Representing Long Volumetric Video with Temporal Gaussian Hierarchy 来源：浙江大学链接：https://zju3dv.github.io/longvolcap/ 文章目录摘要一、前言二、主要方法2.1 时间高斯分层2.2 高效渲染2.3 层次结构更新2.4 紧凑的外观模型…...

编程日记 2025/5/6 1:59:08

Java设计模式 —— 【行为型模式】命令模式（Command Pattern）详解

文章目录模式介绍优缺点适用场景结构案例实现注意事项模式介绍有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此…...

编程日记 2025/4/29 13:57:55

IOS开发如何从入门进阶到高级

针对iOS开发的学习，不同阶段应采取不同的学习方式，以实现高效提升.本文将iOS开发的学习分为入门、实战、进阶三个阶段，下面分别详细介绍. 一、学习社区 iOS开源中国社区这个社区专注于iOS开发的开源项目分享与协作，汇集了大量开…...

编程日记 2025/5/5 17:34:57

数据结构与算法之二叉树: LeetCode 108. 将有序数组转换为二叉搜索树 (Ts版)

将有序数组转换为二叉搜索树 https://leetcode.cn/problems/convert-sorted-array-to-binary-search-tree/description/ 描述给你一个整数数组 nums ，其中元素已经按升序排列请你将其转换为一棵平衡二叉搜索树示例 1 输入：nums [-10,-3,0,5,9…...

编程日记 2025/5/6 15:38:53

细说STM32F407单片机以轮询方式读写外部SRAM的方法

目录一、实例的功能二、工程配置 1、KEYLED 2、时钟、DEBUG、USART6、NVIC、GPIO、CodeGenerator 3、FSMC （1） 模式设置 （2） Bank 1子区3参数设置 1) NOR/PSRAM control组，子区控制参数 2) NOR/PSRAM timi…...

编程日记 2025/5/5 17:45:20

【Unity3D】AB包加密（AssetBundle加密）

加密前： 加密后，直接无法加载ab，所以无法正常看到ab内容。 using UnityEngine; using UnityEditor; using System.IO; public static class AssetBundleDemoTest {[MenuItem("Tools/打包!")]public static void Build(){//注意:St…...

编程日记 2025/5/6 1:23:34

wujie无界微前端框架初使用

先说一下项目需求：将单独的四套系统的登录操作统一放在一个入口页面进行登录，所有系统都使用的是vue3，（不要问我为啥会这样设计，产品说的客户要求） 1.主系统下载wujie 我全套都是vue3，所以直接…...

编程日记 2025/5/5 10:10:54

联发科MTK6771/MT6771安卓核心板规格参数介绍

MT6771，也被称为Helio P60，是联发科技(MediaTek)推出的一款中央处理器(CPU)芯片，可运行 android9.0 操作系统的 4G AI 安卓智能模块。MT6771芯片采用了12纳米工艺制造，拥有八个ARM Cortex-A73和Cortex-A53核心，主频分别…...

编程日记 2025/5/2 0:06:49

ZooKeeper Java API操作

（1）添加依赖，在pom.xml文件中添加zookeeper依赖： （2）连接zookeeper服务，创建cn.itcast.zookeeper包，在该包中创建ZooKeeperDemo类，该类用于实现创建会话和操作ZooKeeper&…...

编程日记 2025/5/4 22:53:28

【vue3封装element-plus的反馈组件el-drawer、el-dialog】

vue2中封装el-drawer、el-dialog这类反馈类子组件，需要将父组件的visible值传递子组件，并且再通过$emit将关闭弹窗的组件值传回父组件，同事子组件还需要监听父组件传递过来的visible的值，来驱动弹窗显示隐藏，很麻烦&am…...

编程日记 2025/5/6 9:22:17

doris:远程存储

功能简介远程存储支持把部分数据放到外部存储（例如对象存储，HDFS）上，节省成本，不牺牲功能。注意远程存储的数据只有一个副本，数据可靠性依赖远程存储的数据可靠性，您需要保证远程存储有…...

编程日记 2025/5/6 14:57:31

win11 电脑重启后，需要重新插拔U盘、移动硬盘才能识别问题

win11 电脑重启后，需要重新插拔U盘、移动硬盘才能识别问题前言原因：win10在一个版本更新后，usb默认都开了自动停用一、解决方式一在设备管理里面找到那些需要插拔才能识别的usb设备，电源策略里关掉“允许计算机关闭这个设…...

编程日记 2025/5/5 11:15:08

望获实时Linux系统与大语言模型深度融合，开创实时智能无限可能！

大语言模型的崛起为智能化应用开辟了新的可能性。借助深度学习技术，这些模型能够理解和生成自然语言，处理复杂的文本和语义信息。这使得它们在诸如人机问答、内容生成和数据分析等领域展现出巨大的潜力。在实时控制领域，大语言模型能够显著提…...

编程日记 2025/5/6 1:23:34

HTML5 弹跳动画（Bounce Animation）详解

1. 使用 CSS 实现弹跳动画

2. 使用 JavaScript 实现弹跳动画

总结

相关文章：