迎接新年：HTML+CSS+JS实现动态烟花特效

2023-03-17 19:53:13

新年烟花，让网站动起来

在辞旧迎新的佳节里，烟花是不可或缺的元素。虽然环保意识的提升和禁炮令的实施让我们无法燃放真实的烟花，但我们仍然可以通过网页技术，在虚拟世界中欣赏到烟花的美妙。

HTML、CSS、JavaScript打造虚拟烟花

1. 准备工作

想要打造虚拟烟花，我们需要准备一个HTML文件作为容器，一个CSS文件定义烟花的外观和行为，以及一个JavaScript文件控制烟花的动态行为。

2. HTML结构

<canvas id="canvas"></canvas>
<script src="script.js"></script>

3. CSS样式

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.firework {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: firework 2s infinite;
}

@keyframes firework {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

4. JavaScript脚本

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

const fireworks = [];

function createFirework() {
  const firework = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    size: Math.random() * 100 + 50,
    color: 'white',
    speed: Math.random() * 10 + 5,
    angle: Math.random() * Math.PI * 2,
  };

  fireworks.push(firework);
}

function drawFireworks() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < fireworks.length; i++) {
    const firework = fireworks[i];

    ctx.beginPath();
    ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
    ctx.fillStyle = firework.color;
    ctx.fill();

    firework.x += Math.cos(firework.angle) * firework.speed;
    firework.y += Math.sin(firework.angle) * firework.speed;

    if (firework.x < 0 || firework.x > canvas.width || firework.y < 0 || firework.y > canvas.height) {
      fireworks.splice(i, 1);
    }
  }
}

function updateFireworks() {
  setInterval(createFirework, 100);
  setInterval(drawFireworks, 50);
}

updateFireworks();