炫酷动画粒子雨网页制作秘籍，手把手教学

前端

2023-07-27 10:43:49

创建令人惊叹的粒子雨动画：使用 HTML、CSS 和 JavaScript 实现交互式网页设计

子标题 1：粒子雨动画的魅力

粒子雨动画因其引人入胜的视觉效果而风靡一时。由无数小粒子组成的这些动画可以呈现出多种形态，为你的网站增添动感和美感。无论是作为网站背景、网页过渡还是游戏特效，粒子雨动画都能为你带来无限创意空间。

子标题 2：从头开始构建粒子雨动画

要创建粒子雨动画，我们需要三个基本要素：HTML、CSS 和 JavaScript。让我们逐步了解如何使用这些技术构建一个属于你自己的粒子雨动画。

HTML 代码

首先，创建一个 HTML 文件，包含以下元素：

<div id="container"></div>
<script src="script.js"></script>

<div id="container"></div> 将作为粒子雨动画的容器，而 <script src="script.js"></script> 则引入了 JavaScript 脚本文件。

CSS 代码

接下来，使用 CSS 代码设置动画的样式：

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

.particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
}

这些样式将确保粒子雨动画覆盖整个屏幕，并为粒子设置基本样式。

JavaScript 代码

最后，使用 JavaScript 代码实现动画的动态效果：

// 获取元素
const container = document.getElementById('container');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 创建粒子
const particles = [];
for (let i = 0; i < 100; i++) {
  particles.push({
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight,
    vx: Math.random() * 2 - 1,
    vy: Math.random() * 2 - 1,
    radius: Math.random() * 5 + 1,
    color: `rgba(255, 255, 255, ${Math.random()})`
  });
}

// 更新和绘制粒子
function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];
    particle.x += particle.vx;
    particle.y += particle.vy;
    
    // 边界检测
    if (particle.x < 0 || particle.x > window.innerWidth) {
      particle.vx = -particle.vx;
    }
    if (particle.y < 0 || particle.y > window.innerHeight) {
      particle.vy = -particle.vy;
    }
    
    // 绘制粒子
    ctx.beginPath();
    ctx.fillStyle = particle.color;
    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(update);
}

// 添加画布并启动动画
container.appendChild(canvas);
update();