css制作冒泡

使用CSS制作冒泡效果

冒泡效果可以通过CSS动画和伪元素实现，以下是一种常见的实现方式：

<div class="bubble"></div>

.bubble {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  position: relative;
  animation: float 3s ease-in-out infinite;
}

.bubble::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  top: 10px;
  left: 10px;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(20deg);
    opacity: 0;
  }
}

创建多个随机冒泡

要实现更自然的冒泡效果，可以创建多个随机大小和速度的冒泡：

<div class="bubbles-container">
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
</div>

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

.bubble {
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: float linear infinite;
}

/* 为每个气泡设置不同的大小和动画 */
.bubble:nth-child(1) {
  width: 20px;
  height: 20px;
  left: 10%;
  animation-duration: 4s;
}

.bubble:nth-child(2) {
  width: 35px;
  height: 35px;
  left: 40%;
  animation-duration: 6s;
}

.bubble:nth-child(3) {
  width: 15px;
  height: 15px;
  left: 70%;
  animation-duration: 5s;
}

@keyframes float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) scale(0.5);
    opacity: 0;
  }
}

添加交互效果的冒泡

可以使用CSS hover伪类为冒泡添加交互效果：

.bubble:hover {
  transform: scale(1.2);
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

使用CSS变量控制冒泡样式

通过CSS变量可以更方便地控制冒泡的整体样式：

:root {
  --bubble-color: rgba(255, 255, 255, 0.6);
  --bubble-size: 30px;
  --float-distance: 150px;
}

.bubble {
  width: var(--bubble-size);
  height: var(--bubble-size);
  background-color: var(--bubble-color);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  to {
    transform: translateY(calc(-1 * var(--float-distance)));
  }
}