用CSS绘制新年烟花，写出欢乐祥和的新年盛景

2024-01-17 01:31:03

随着春节的临近，大街小巷都洋溢着喜庆的气氛。然而，由于燃放烟花爆竹会造成空气污染和火灾隐患，许多城市都出台了禁放烟花爆竹的规定。虽然不能燃放烟花爆竹，但我们仍然可以通过其他方式来庆祝新年，比如用CSS来写一个烟花，让新年充满欢乐祥和的气氛。

1. HTML结构

首先，我们需要创建一个HTML结构来放置我们的烟花。我们可以使用一个div元素作为容器，并在里面添加一个canvas元素。canvas元素将用于绘制烟花效果。

<div id="container">
  <canvas id="canvas"></canvas>
</div>

2. CSS代码

接下来，我们需要使用CSS来绘制烟花效果。我们可以使用CSS的animation属性来创建动画效果，让烟花在canvas元素中绽放。

#container {
  width: 100%;
  height: 100%;
}

#canvas {
  width: 100%;
  height: 100%;
}

@keyframes firework {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }

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

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

.firework-particle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff0000;
  animation: firework-particle 2s linear infinite;
}

@keyframes firework-particle {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }

  50% {
    transform: translate(0, -50%);
    opacity: 0.5;
  }

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

3. JavaScript代码

最后，我们需要使用JavaScript代码来控制烟花效果。我们可以使用JavaScript代码来生成随机的烟花位置和颜色，并控制烟花绽放的速度和方向。

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

var fireworks = [];

function createFirework() {
  var firework = {
    x: Math.random() * canvas.width,
    y: canvas.height,
    vx: 0,
    vy: -Math.random() * 5,
    color: '#' + Math.floor(Math.random() * 16777215).toString(16)
  };

  fireworks.push(firework);
}

function updateFireworks() {
  for (var i = 0; i < fireworks.length; i++) {
    var firework = fireworks[i];

    firework.x += firework.vx;
    firework.y += firework.vy;

    if (firework.y < 0) {
      firework.y = canvas.height;
    }

    ctx.fillStyle = firework.color;
    ctx.fillRect(firework.x, firework.y, 10, 10);
  }
}

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

  updateFireworks();

  requestAnimationFrame(drawFireworks);
}

createFirework();
drawFireworks();