CSS + JS 动态雪花效果 | 一键复制代码，亲测有效

2023-09-06 22:08:09

使用 CSS + JS 营造迷人的圣诞雪花效果

为你的网站增添节日气氛

每逢佳节，我们都会怀着一份期盼，希望在寒冷的冬日里邂逅美丽的雪花。如今，借助先进的 CSS 和 JS 技术，我们可以在你的网站上创造出令人惊叹的动态雪花效果，为你的访客带来身临其境的节日体验。

实现步骤

1. HTML 代码

在你的 HTML 页面中添加以下代码：

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

2. CSS 代码

在你的 CSS 文件中添加以下代码：

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

.snowflake {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  animation: fall 10s infinite linear;
}

@keyframes fall {
  from {
    top: 0;
  }

  to {
    top: 100%;
  }
}

3. JavaScript 代码

在你的 JavaScript 文件中添加以下代码：

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

var snowflakes = [];

function createSnowflake() {
  var snowflake = {
    x: Math.random() * window.innerWidth,
    y: 0,
    size: Math.random() * 5 + 5,
    speed: Math.random() * 3 + 1
  };

  snowflakes.push(snowflake);
}

function drawSnowflake(snowflake) {
  ctx.beginPath();
  ctx.arc(snowflake.x, snowflake.y, snowflake.size, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
}

function moveSnowflakes() {
  for (var i = 0; i < snowflakes.length; i++) {
    var snowflake = snowflakes[i];
    snowflake.y += snowflake.speed;

    if (snowflake.y > window.innerHeight) {
      snowflake.y = 0;
    }
  }
}

function draw() {
  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

  for (var i = 0; i < snowflakes.length; i++) {
    var snowflake = snowflakes[i];
    drawSnowflake(snowflake);
  }

  moveSnowflakes();

  requestAnimationFrame(draw);
}

createSnowflake();
draw();