css制作冒泡

使用CSS制作冒泡效果

CSS可以通过动画和伪元素实现动态冒泡效果，模拟气泡上升的视觉效果。以下是两种常见方法：

方法一：使用@keyframes动画和伪元素

通过关键帧动画控制气泡的上升、缩放和透明度变化：

.bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: rise 4s infinite ease-in;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(0.2);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100px) scale(1);
    opacity: 0;
  }
}

方法二：多气泡随机动画

通过为多个气泡元素设置不同的动画延迟和大小，增强随机感：

<div class="bubbles-container">
  <div class="bubble" style="--delay: 0s; --size: 15px; left: 10%"></div>
  <div class="bubble" style="--delay: 1s; --size: 25px; left: 30%"></div>
</div>

.bubbles-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.bubble {
  position: absolute;
  width: var(--size);
  height: var(--size);
  bottom: 0;
  background: radial-gradient(circle, white 60%, transparent 80%);
  border-radius: 50%;
  animation: float 3s infinite var(--delay);
}

@keyframes float {
  to {
    transform: translateY(-200px) rotate(360deg);
    opacity: 0;
  }
}

增强效果技巧

• 添加光影：使用box-shadow或径向渐变增强立体感：

  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);

• 路径变化：通过translateX实现左右飘动：

  @keyframes float {
    50% { transform: translateX(20px); }
  }

• 响应式控制：通过JavaScript动态生成气泡数量和位置。

浏览器兼容性

确保添加前缀以支持旧版浏览器：

-webkit-animation: float 3s infinite;
-moz-animation: float 3s infinite;

通过调整动画时间、延迟和贝塞尔曲线（如cubic-bezier(0.4, 0, 0.2, 1)），可定制不同的运动效果。