如何让气泡背景动画覆盖整个屏幕高度？

核心修改步骤 #

• 调整.bubbles容器的定位与尺寸
  把.bubbles改成固定定位，让它脱离文档流直接覆盖整个视口，同时避免影响页面原有布局：

  .bubbles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1; /* 将气泡层置于页面内容下方，不遮挡按钮、文字等元素 */
  }
  

  之前仅设置100vh但未指定固定定位的话，容器高度会受父元素高度限制，导致只能覆盖部分区域。

• 修正气泡的动画范围
  检查rise关键帧动画，确保气泡从视口底部外生成，向上移动至顶部外消失，而非局限在容器的局部区域：

  @keyframes rise {
    0% {
      transform: translateY(100vh); /* 从屏幕最下方外侧开始 */
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100vh); /* 移动至屏幕最上方外侧消失 */
      opacity: 0;
    }
  }
  

• 优化全局基础样式
  不要给body硬设100vh，改用最小高度确保铺满视口，内容超长时自动延伸：

  html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
  }
  

之前方法无效的原因 #

• 给body设置100vh会让body高度固定，当页面内容超过视口时，气泡容器的100vh仅能覆盖初始屏幕，无法跟随页面滚动。
• 关闭全局overflow会锁死页面滚动、破坏布局，而给.bubbles自身设置overflow: hidden只会隐藏容器内溢出的气泡，不会影响页面正常滚动逻辑。

内容的提问来源于stack exchange，提问作者Eric Andre