当前位置：首页 > JavaScript

js 实现气泡

2026-01-30 09:11:28JavaScript

使用 CSS 和 JavaScript 创建气泡效果

通过 CSS 定义气泡样式，结合 JavaScript 动态生成气泡元素并添加动画效果。

CSS 样式定义

.bubble {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  animation: float 4s ease-in-out infinite;
}

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

JavaScript 生成气泡

function createBubble(x, y) {
  const bubble = document.createElement('div');
  bubble.classList.add('bubble');

  const size = Math.random() * 30 + 10;
  bubble.style.width = `${size}px`;
  bubble.style.height = `${size}px`;
  bubble.style.left = `${x}px`;
  bubble.style.top = `${y}px`;

  document.body.appendChild(bubble);

  setTimeout(() => {
    bubble.remove();
  }, 4000);
}

document.addEventListener('mousemove', (e) => {
  createBubble(e.clientX, e.clientY);
});

使用 Canvas 绘制气泡

通过 HTML5 Canvas 实现更高效的批量气泡渲染。

HTML 结构

<canvas id="bubbleCanvas"></canvas>

JavaScript 实现

const canvas = document.getElementById('bubbleCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const bubbles = [];

class Bubble {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 20 + 10;
    this.speed = Math.random() * 2 + 1;
    this.opacity = Math.random() * 0.5 + 0.3;
    this.angle = Math.random() * 360;
  }

  update() {
    this.y -= this.speed;
    this.angle += 2;
    if (this.y < -this.size) {
      this.y = canvas.height + this.size;
    }
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
    ctx.fill();
  }
}

function init() {
  for (let i = 0; i < 50; i++) {
    bubbles.push(new Bubble(
      Math.random() * canvas.width,
      Math.random() * canvas.height
    ));
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  bubbles.forEach(bubble => {
    bubble.update();
    bubble.draw();
  });
  requestAnimationFrame(animate);
}

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

init();
animate();

使用 CSS 伪元素创建气泡背景

纯 CSS 方案实现静态气泡背景效果。

CSS 实现

body {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.8) 0%, 
    rgba(255, 255, 255, 0) 20%);
  background-size: 100px 100px;
  opacity: 0.4;
  pointer-events: none;
}

使用 GSAP 实现高级动画

通过 GSAP 动画库创建更复杂的气泡效果。

JavaScript 实现

import { gsap } from 'gsap';

function createAnimatedBubble() {
  const bubble = document.createElement('div');
  bubble.className = 'bubble';

  const size = Math.random() * 40 + 20;
  bubble.style.width = `${size}px`;
  bubble.style.height = `${size}px`;

  document.body.appendChild(bubble);

  gsap.fromTo(bubble, 
    { 
      x: Math.random() * window.innerWidth,
      y: window.innerHeight + size,
      opacity: 0.8 
    },
    {
      y: -size,
      opacity: 0,
      duration: Math.random() * 3 + 2,
      ease: 'power1.out',
      onComplete: () => bubble.remove()
    }
  );
}

setInterval(createAnimatedBubble, 300);

以上方案可根据具体需求选择使用，DOM 方案适合少量气泡交互，Canvas 方案适合大量气泡性能优化，GSAP 方案适合复杂动画效果。

js 实现气泡