HTML气泡上升浮动动画实现（零基础）

`，也可以用伪元素 `::before` 或 `::after`——后者能减少 DOM 节点，性能更优。 几个关键点： - 容器需设置 `position: relative`，气泡本身设置 `position: absolute`，这是动画运行的前提 - 动画时长建议控制在 3–6s 之间。太快像弹射，太慢则拖沓 - 使用 `transform: translateY()` 而非 `top` 做位移，前者能触发 GPU 加速，性能更好 - 缓动函数推荐 `cubic-bezier(0.2, 0.8, 0.4, 1)`，能让上升过程带有轻盈感，比 `linear` 的机械平移更自然 ### 多个气泡不同步上升要靠 animation-delay 随机化 所有气泡同时起落，就像集体广播体操，缺乏真实感。自然界的气泡都是错落、不规则地上升——通过 `animation-delay` 控制起始时间差即可实现。 不需要手写十几个不同的 delay 值。可以用 CSS 自定义属性配合 JS 动态赋值，也可以预设 3–5 组 class，通过切换类名来分配：

.bubble-1 { animation-delay: 0.3s; }
.bubble-2 { animation-delay: 1.1s; }
.bubble-3 { animation-delay: 1.9s; }

还有一个更省事的思路：在父容器上使用统一的 `animation: bubble-rise 4s infinite`，然后给每个气泡微调 `animation-duration`——比如 3.7s、4.2s——也能打破整齐划一的同步感。 ### 气泡大小渐变和淡出要用 transform + opacity 组合 仅能上升还不够。真实的气泡越往上走，体积会略微膨胀、边缘变得模糊，快到水面时逐渐半透明。这些细节需要在 `@keyframes` 中同时控制 `transform: scale()` 和 `opacity`。 这里有两个容易翻车的地方： - 从 `scale(0.8)` 到 `scale(1.2)` 的渐变，比固定大小更有“呼吸感”。但不要超过 `scale(1.4)`，否则气泡看起来会失真，像吹气球 - `opacity` 的典型路径是 0.6 → 1.0 → 0.3：底部稍微透一点（模拟水体遮挡），中段最实，顶部快破灭前又变淡 - 注意：不要在 keyframes 中对 `border-radius` 做动画——它不支持平滑过渡，气泡会在某一帧突然从圆变方，非常出戏 ### 移动端卡顿？关掉 animation-fill-mode 或降帧率 部分安卓 WebView 或低端 iOS 设备，当气泡数量超过 15 个，或者使用了 `box-shadow`，动画容易掉帧。首先要排查的是 `animation-fill-mode: forwards`——它会让元素停在动画终点状态，可能触发额外重排。改成 `none` 或直接去掉，往往能缓解。 其他几招也很管用： - `will-change: transform` 能提前通知浏览器做优化，但不要滥用——每个气泡都加，反而会拖慢性能 - 将 `animation-timing-function` 换成 `linear`，计算开销比 `cubic-bezier` 小，低端设备上更稳定 - 气泡数量超过 10 个时，可以用 JS 控制：屏幕外的气泡直接 `animation-play-state: paused`，减少无效渲染 - 实在不行就降级：在 iOS Safari 下通过 `@supports (-webkit-animation: none)` 单独设置一套更简化的动画 气泡动画真正的难点，不在“怎么让它动”，而在“动多少”——数量、尺寸、延迟、透明度曲线，每一项都需要靠肉眼反复调整。截图对比两版效果，比盯着代码看一百行都管用。