❤️创意网页：绚丽粒子雨动画

本文主要是介绍❤️创意网页：绚丽粒子雨动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

✨博主：命运之光

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

简介

动态图展示

静态图展示

HTML 结构

CSS 样式

JavaScript 代码

JavaScript 逻辑解释

运行效果

完整代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

总结

简介

欢迎来到本篇技术博客！今天，我们将一起学习如何使用 HTML、CSS 和 JavaScript 来创造一个更炫酷的动态网页示例。我们将在网页中添加许多随机颜色的粒子，让它们以不同的速度在画布上飘动，形成一个美妙的粒子效果。让我们开始吧！

动态图展示

静态图展示

HTML 结构

我们的网页将由一个 canvas 元素组成，用于绘制粒子。我们需要在 <head> 标签中添加标题和 CSS 样式，然后在 <body> 标签中添加 canvas 元素和 JavaScript 代码。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>更炫酷的动态网页示例</title><!-- CSS 样式在这里添加 -->
</head>
<body><!-- 绘制粒子的 Canvas 元素 --><canvas id="myCanvas"></canvas><!-- JavaScript 代码在这里添加 -->
</body>
</html>

CSS 样式

为了实现更好的视觉效果，我们将设置网页背景色为黑色，去掉默认的页面边距和滚动条，然后将 canvas 元素设置为全屏显示。

/* 网页样式 */
body {margin: 0;overflow: hidden;background-color: #000;
}/* Canvas 元素样式 */
canvas {display: block;
}

JavaScript 代码

现在，我们将使用 JavaScript 创建一个 Particle 类，用于表示粒子对象。每个粒子都有随机的位置、大小、颜色和竖直速度。我们还将创建一个粒子数组，并在画布上动态绘制这些粒子，形成粒子效果。

// 获取canvas元素和绘图上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');// 设置canvas的宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;// 粒子对象
class Particle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 3 + 1; // 随机大小this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色this.velocityY = Math.random() * 3 + 1; // 随机竖直速度}// 更新粒子的位置update() {this.y += this.velocityY;// 当粒子到达画布底部时，重新放置到画布顶部if (this.y > canvas.height) {this.y = 0;}}// 绘制粒子draw() {ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.fill();}
}// 创建粒子数组
const particles = [];
const numParticles = 100;// 初始化粒子
for (let i = 0; i < numParticles; i++) {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height;particles.push(new Particle(x, y));
}// 动画循环函数
function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < particles.length; i++) {particles[i].update();particles[i].draw();}requestAnimationFrame(animate);
}// 启动动画
animate();

JavaScript 逻辑解释

我们通过 document.getElementById 方法获取 canvas 元素，并创建一个绘图上下文 ctx，用于在画布上绘制粒子。
Particle 类表示每个粒子对象。在构造函数中，我们为每个粒子设置随机的位置、大小、颜色和竖直速度。
update 方法用于更新粒子的位置。我们让每个粒子沿竖直方向运动，并在到达画布底部时将其重新放置到画布顶部，实现循环运动。
draw 方法用于绘制粒子，我们使用 ctx.arc 方法绘制圆形粒子，并设置颜色为随机的彩虹色。
我们创建了一个粒子数组 particles，并在初始化时生成了多个随机位置的粒子对象。
animate 函数用于实现动画循环。在每一帧中，我们清空画布、更新每个粒子的位置，并绘制粒子，然后使用 requestAnimationFrame 方法递归调用 animate 函数，实现连续的动画效果。

运行效果

将上述代码保存为一个 HTML 文件，并在浏览器中打开它。您将会看到一个更炫酷的动态网页示例，画布上漂浮着许多彩色的粒子，形成一个华丽的粒子效果。在不同的屏幕大小下，粒子会随机分布，使效果更加丰富多彩。

完整代码

<!DOCTYPE html>
<html>
<head><title>好看的粒子雨动画</title><style>body {margin: 0;overflow: hidden;background-color: #000;}canvas {display: block;}</style>
</head>
<body><canvas id="myCanvas"></canvas><script>// 获取canvas元素和绘图上下文const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 设置canvas的宽度和高度canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 粒子对象class Particle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 3 + 1; // 随机大小this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色this.velocityY = Math.random() * 3 + 1; // 随机竖直速度}// 更新粒子的位置update() {this.y += this.velocityY;// 当粒子到达画布底部时，重新放置到画布顶部if (this.y > canvas.height) {this.y = 0;}}// 绘制粒子draw() {ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.fill();}}// 创建粒子数组const particles = [];const numParticles = 100;// 初始化粒子for (let i = 0; i < numParticles; i++) {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height;particles.push(new Particle(x, y));}// 动画循环函数function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < particles.length; i++) {particles[i].update();particles[i].draw();}requestAnimationFrame(animate);}// 启动动画animate();</script>
</body>
</html>