bubbly不支持跳跃动作，因其底层canvas物理模拟缺乏重力、落地检测等参数，需用css动画叠加容器或js+dom小球实现。
你想让Bubbly气泡背景具备跳跃动作特效，但Bubbly本身只提供浮动、飘散、淡入等流体式动画，【它不支持位移类弹跳（如 translateY 或 bounce 关键帧）】——跳跃动作必须脱离Bubbly原生能力，用CSS或JS叠加实现。
为什么Bubbly不能直接做跳跃
Bubbly底层基于canvas逐帧绘制气泡位置，所有运动均由内部物理模拟驱动：气泡只做随机漂浮、缓慢聚合/散开、边缘反弹，【没有垂直方向的重力加速度、落地检测、回弹形变等跳跃必备参数】。强行修改其源码注入bounce逻辑会导致气泡轨迹错乱、性能骤降，且v1.0.0未开放运动引擎API。
所以跳跃动作只能作为独立图层叠加在Bubbly canvas上方。
用CSS动画给气泡容器加跳跃动效
这一步适用于想让整个气泡背景“微微弹跳”，比如页面加载时一次轻跃，或随用户滚动触发节奏性起伏。
第一步：给Bubbly的宿主容器添加唯一class
在引入bubbly.js后、调用bubbly()前，为
第二步：写跳跃keyframes并绑定
在
@keyframes bubble-hop {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(-12px) scale(1.03); }
100% { transform: translateY(0) scale(1); }
}
.bubble-jump { animation: bubble-hop 0.6s cubic-bezier(0.25, 0.8, 0.4, 1.1) forwards; }
注意：cubic-bezier(0.25, 0.8, 0.4, 1.1)中y=1.1产生轻微超调，模拟离地瞬间的弹性拉伸；scale(1.03)配合位移，避免纯平移显得空洞。
用JS动态生成跳跃小球覆盖Bubbly
若需要真实弹跳感（如单个球体多次触地、衰减回弹），必须绕过Bubbly，用DOM元素+CSS动画实现，再定位到canvas上方。
方法一：纯CSS方案（推荐）
在HTML中添加一个绝对定位的
.jump-ball {
width: 24px; height: 24px;
background: radial-gradient(circle at 30% 30%, #fff, #ffcc33);
border-radius: 50%;
position: absolute;
top: 20vh; left: 50vw;
transform: translateX(-50%);
z-index: 10;
animation: bounce-solo 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes bounce-solo {
0% { transform: translateX(-50%) translateY(0) scaleY(1); }
50% { transform: translateX(-50%) translateY(80px) scaleY(1.2); }
70% { transform: translateX(-50%) translateY(40px) scaleY(0.9); }
90% { transform: translateX(-50%) translateY(10px) scaleY(1.05); }
100% { transform: translateX(-50%) translateY(0) scaleY(1); }
}
方法二：JS控制起跳时机
监听滚动事件，在特定区域触发一次跳跃：
document.addEventListener('scroll', () => {
if (window.scrollY > 300) {
document.querySelector('.jump-ball').style.animation = 'none';
void document.querySelector('.jump-ball').offsetWidth;
document.querySelector('.jump-ball').style.animation = 'bounce-solo 0.9s cubic-bezier(0.28, 0.84, 0.42, 1) 1';
}
});
这行void offsetWidth是强制重排，确保animation重置生效；末尾的1表示只执行一次，避免连续触发。
