为HTML赋予飞舞雪花：CSS、JS和一点点魔法

2023-11-12 17:31:10

在这个充斥着数码与科技的时代，我们或许已经逐渐远离了大自然，但借助HTML、CSS和JavaScript，我们可以将冬日的浪漫与美丽带入数字世界，让雪花在网页中翩翩起舞，带给您前所未有的视觉体验。

HTML准备

就像搭舞台一样，首先我们需要准备一个HTML骨架，即搭建好网页的基本结构：

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

这里，我们定义了页面的标题和结构，并在<body>部分插入<canvas>元素，它是我们用来创建和绘制雪花动画的画布。

CSS烘托气氛

有了舞台，接下来我们要搭建好背景，CSS就相当于舞台的幕布和装饰：

body {
  background-color: #000;
  margin: 0;
}

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

我们为网页主体设置了一个黑色背景，以烘托雪花的晶莹剔透，并通过CSS将画布撑满整个窗口，为雪花动画提供了充足的施展空间。

JavaScript编织雪花

接下来，重头戏来了！我们用JavaScript来编织雪花，让它们在画布上翩翩起舞：

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

const snowflakes = [];
const flakeCount = 100;

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

for (let i = 0; i < flakeCount; i++) {
  const x = Math.random() * windowWidth;
  const y = Math.random() * windowHeight;

  snowflakes.push({
    x,
    y,
    vx: 0.5,
    vy: 1,
    radius: Math.random() * 4 + 2,
  });
}

function drawFlake(flake) {
  ctx.fillStyle = '#fff';
  ctx.beginPath();
  ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2, true);
  ctx.fill();
}

function moveFlake(flake) {
  flake.x += flake.vx;
  flake.y += flake.vy;

  if (flake.y > windowHeight) {
    flake.y = 0;
  }
}

function animate() {
  ctx.clearRect(0, 0, windowWidth, windowHeight);

  snowflakes.forEach((flake) => {
    drawFlake(flake);
    moveFlake(flake);
  });

  requestAnimationFrame(animate);
}

animate();