先给出一个核心结论：Bubbly 这款气泡库天然不支持跳跃动作。它的底层基于 Canvas 物理模拟，所有气泡运动均为随机漂浮、缓慢聚合、边缘反弹，缺少重力加速度、落地检测和回弹形变等跳跃效果所必需的参数。因此，若要在气泡背景上实现跳跃特效，必须另辟蹊径——借助 CSS 动画叠加容器，或使用 JS + DOM 小球独立构建。

简单来说，Bubbly 只擅长流体式动画，例如浮动、飘散、淡入。而位移类的弹跳（如 translateY 或 bounce 关键帧）则完全不在其能力范围内。跳跃动作只能作为独立图层，叠加在 Bubbly canvas 的上方。

为什么 Bubbly 无法直接实现跳跃效果

要理解这一点，需先了解 Bubbly 的底层机制。它基于 canvas 逐帧绘制气泡位置，所有运动均由内部物理模拟驱动——气泡只会随机漂浮、缓慢聚合或散开、在边缘反弹。注意，这里没有垂直方向的重力加速度，也没有落地检测和回弹形变。如果强行修改源码来注入 bounce 逻辑，会导致气泡轨迹错乱、性能骤降，而且 v1.0.0 版本并未开放运动引擎 API。

因此，跳跃动作只能作为独立图层覆盖在 Bubbly canvas 上方，这是最稳妥的做法。

用 CSS 动画为气泡容器添加跳跃动效

该方案适用于希望整体气泡背景产生“轻微弹跳”的场景——例如页面加载时制造一次轻盈跳动，或随用户滚动触发节奏性起伏。整体思路非常简单：为 Bubbly 的宿主容器绑定一个动画。

具体操作：先给 Bubbly 的宿主容器添加一个 class。例如在引入 bubbly.js 之后、调用 bubbly() 之前，为 或某个

加上 class="bubble-jump"。

然后在