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

本文介绍了如何使用HTML、CSS和JavaScript构建一个动态的粒子效果网页。通过创建canvas元素,应用CSS样式,以及编写JavaScript代码来生成和管理粒子,最终实现粒子在画布上随机飘动的视觉效果。读者可以通过复制代码到记事本,保存为HTML文件来直接体验和学习这个项目。
摘要由CSDN通过智能技术生成

博主:命运之光 

🌸专栏: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 逻辑解释

  1. 我们通过 document.getElementById 方法获取 canvas 元素,并创建一个绘图上下文 ctx,用于在画布上绘制粒子。

  2. Particle 类表示每个粒子对象。在构造函数中,我们为每个粒子设置随机的位置、大小、颜色和竖直速度。

  3. update 方法用于更新粒子的位置。我们让每个粒子沿竖直方向运动,并在到达画布底部时将其重新放置到画布顶部,实现循环运动。

  4. draw 方法用于绘制粒子,我们使用 ctx.arc 方法绘制圆形粒子,并设置颜色为随机的彩虹色。

  5. 我们创建了一个粒子数组 particles,并在初始化时生成了多个随机位置的粒子对象。

  6. 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>

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

🍓1.打开记事本 

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

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


总结

通过本篇技术博客,我们学习了如何使用 HTML、CSS 和 JavaScript 创造一个更炫酷的动态网页示例。我们实现了彩色粒子效果,并让粒子在画布上飘动,形成一个绚丽多彩的效果。希望您享受了本次创作过程,祝您编程愉快!


本章的内容就到这里了,觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片,交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

命运之光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值