酷炫多彩的烟花特效：用HTML、CSS和JavaScript打造新春佳节的欢乐氛围

2022-12-10 16:59:28

在数字世界中，打造令人惊叹的视觉效果是锦上添花之笔，它可以提升用户体验并让你的网站或项目脱颖而出。其中，烟花特效以其绚丽多彩和节日气氛而备受欢迎。本文将指导你如何使用 HTML、CSS 和 JavaScript 轻松创建出属于你自己的烟花特效。

一、准备工作

在你开始施放虚拟烟花之前，你需要准备一些必要的工具和资源：

文本编辑器：选择你喜欢的文本编辑器，如 Notepad++、Sublime Text 或 Visual Studio Code。
浏览器：使用 Chrome、Firefox、Safari 或 Edge 等现代浏览器。
HTML、CSS 和 JavaScript 文件：创建一个 HTML 文件（index.html）、一个 CSS 文件（style.css）和一个 JavaScript 文件（script.js）。
烟花图像：从网上下载或自己制作一些烟花图像。

二、HTML 结构

首先，在 index.html 文件中编写 HTML 结构，为烟花特效创建一个容器：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div id="canvas"></div>
</body>
</html>

三、CSS 样式

接下来，在 style.css 文件中编写 CSS 样式，设置烟花特效的样式：

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

.firework {
  position: absolute;
  left: 50%;
  top: 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);
  }
}

四、JavaScript 逻辑

现在是发挥 JavaScript 威力的时刻了。在 script.js 文件中编写 JavaScript 逻辑，控制烟花特效的绽放：

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

let fireworks = [];

function createFirework() {
  const firework = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    size: Math.random() * 100 + 50,
    color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`,
    speed: Math.random() * 5 + 1,
  };

  fireworks.push(firework);
}

function drawFirework(firework) {
  context.beginPath();
  context.arc(firework.x, firework.y, firework.size, 0, 2 * Math.PI);
  context.fillStyle = firework.color;
  context.fill();
}

function updateFirework(firework) {
  firework.y += firework.speed;

  if (firework.y > canvas.height) {
    fireworks.shift();
  }
}

function loop() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < fireworks.length; i++) {
    drawFirework(fireworks[i]);
    updateFirework(fireworks[i]);
  }

  createFirework();

  requestAnimationFrame(loop);
}

loop();