活力四射的背景：5分钟实现气泡浮动背景特效 HTML+CSS

2023-10-24 17:19:43

气泡浮动背景特效

气泡浮动背景特效是一种流行的网页设计元素，它可以使网站或博客的背景看起来更加生动有趣。这种特效通常使用 HTML 和 CSS 来实现，并且很容易创建。

实现步骤

添加HTML结构

首先，我们需要创建一个简单的 HTML 结构。这个结构包括一个底层盒子和多个气泡标签。底层盒子将用于定位气泡，而气泡标签将用于创建气泡本身。

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

添加CSS样式

接下来，我们需要用 CSS 来控制气泡的大小、颜色和移动方式。

.bubble-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  animation: float 5s infinite;
}

@keyframes float {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(20px, 20px);
  }

  100% {
    transform: translate(0, 0);
  }
}