返回

写代码打工人必备 | JavaScript + CSS实现的炫酷泡泡特效，原地起飞！

前端

用 JavaScript 和 CSS 创建生动、活泼的泡泡效果

为你的网站或项目增添一丝活力和动感，用这个泡泡特效让你的页面瞬间焕发魅力。这个由 JavaScript 和 CSS 实现的特效可以轻松地创建一系列美丽的泡泡，让你的页面更加赏心悦目，吸引眼球。

轻松上手，效果惊艳

这个特效的实现非常简单，只需几行 JavaScript 和 CSS 代码即可完成。首先，你需要创建一个 HTML 元素作为泡泡的容器，然后用 JavaScript 来创建和管理泡泡。最后，再用 CSS 来设置泡泡的外观和动画效果。

个性化定制，随心所欲

在创建泡泡时，你可以根据自己的喜好和需求设置泡泡的大小、颜色、速度和方向等参数，让它们看起来更加逼真有趣。你还可以使用 CSS 来创建不同的动画效果，让泡泡在页面上自由移动和变化。

广泛应用，适用场景多样

这个泡泡特效可以应用于各种场景，比如网站背景、产品展示、游戏界面等。无论你想为你的页面增添活力，还是营造一个令人难忘的视觉体验，这个特效都可以轻松满足你的需求。

动手实践，代码演示

HTML 容器：

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

JavaScript 函数：

function createBubble() {
  // 创建泡泡元素
  var bubble = document.createElement("div");

  // 设置样式
  bubble.className = "bubble";
  bubble.style.left = Math.random() * window.innerWidth + "px";
  bubble.style.top = Math.random() * window.innerHeight + "px";
  bubble.style.backgroundColor = "rgb(" + Math.random() * 255 + "," + Math.random() * 255 + "," + Math.random() * 255 + ")";

  // 添加到容器
  document.getElementById("bubble-container").appendChild(bubble);

  // 设置动画
  setTimeout(function() {
    bubble.style.opacity = 0;
    setTimeout(function() {
      bubble.remove();
    }, 500);
  }, 3000);
}

CSS 样式：

.bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  animation: bubble-animation 3s infinite;
}

@keyframes bubble-animation {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

调用 JavaScript 函数：

<body onload="setInterval(createBubble, 1000);">

常见问题解答

1. 泡泡的尺寸可以改变吗？
答：是的，可以在 JavaScript 代码中调整 bubble.style.width 和 bubble.style.height 来改变泡泡的大小。

2. 如何改变泡泡的颜色？
答：可以在 JavaScript 代码中使用 bubble.style.backgroundColor = "color" 来设置泡泡的颜色。

3. 泡泡可以以不同的速度移动吗？
答：是的，可以通过在 JavaScript 代码中调整 setInterval() 函数中的时间间隔来改变泡泡移动的速度。

4. 可以创建不同形状的泡泡吗？
答：目前这个特效只能创建圆形泡泡。

5. 泡泡可以与页面上的其他元素交互吗？
答：否，这个特效中的泡泡不会与页面上的其他元素交互。