❤️创意网页：绚丽粒子炸裂特效①（真的超好看）超好看的粒子交互跟随效果~彩色随机粒子爆裂

命运之光

发布于 2024-03-20 12:40:31

610

发布于 2024-03-20 12:40:31

引言

在现代互联网时代，用户对于网页的要求越来越高，除了内容的丰富和易读性外，视觉效果也成为吸引用户的重要因素之一。本文将向您展示如何利用HTML5和JavaScript创建一个视觉效果震撼的交互式网页，让您的网站在视觉上脱颖而出，吸引更多访问者。

动态图展示

静态图展示

图1

图2

图3

图4

技术背景

在这个技术快速发展的时代，利用HTML5和JavaScript创建交互式的视觉效果已经成为前端开发的重要趋势。HTML5的<canvas>元素提供了一个强大的绘图环境，结合JavaScript的动态特性，我们可以轻松实现各种视觉效果，例如粒子效果、动画和过渡效果等。

实现视觉效果震撼的网页

下面是一个简单的HTML文档，通过HTML5的<canvas>元素和JavaScript代码，创建了一个令人惊叹的视觉效果。该网页会在用户的鼠标移动时，产生绚丽多彩的粒子效果，为用户带来沉浸式的交互体验。

<!DOCTYPE html>
<html>
<head>
    <title>绚丽粒子炸裂效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        // JavaScript代码部分
        // ...（以下省略JavaScript代码）
    </script>
</body>
</html>

JavaScript代码解析

JavaScript代码部分负责创建粒子效果和实现动画效果。我们使用一个Particle类来表示每个粒子，每个粒子具有随机的大小、颜色和速度，使得粒子在画布上随机运动。

// JavaScript代码部分
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 10 + 2;
        this.speedX = (Math.random() - 0.5) * 5;
        this.speedY = (Math.random() - 0.5) * 5;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }

    update() {
        this.x += this.speedX;
        this.y += this.speedY;

        if (this.size > 0.2) this.size -= 0.1;
    }

    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

const particles = [];

function createParticles(x, y) {
    for (let i = 0; i < 10; i++) {
        const particle = new Particle(x, y);
        particles.push(particle);
    }
}

function animate() {
    requestAnimationFrame(animate);
    ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();

        if (particles[i].size <= 0.3) {
            particles.splice(i, 1);
            i--;
        }
    }
}

canvas.addEventListener("mousemove", (e) => {
    const { offsetX, offsetY } = e;
    createParticles(offsetX, offsetY);
});

animate();

项目完整代码

<!DOCTYPE html>
<html>
<head>
    <title>绚丽粒子炸裂效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        // 设置画布大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 10 + 2;
                this.speedX = (Math.random() - 0.5) * 5;
                this.speedY = (Math.random() - 0.5) * 5;
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;

                if (this.size > 0.2) this.size -= 0.1;
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        const particles = [];

        function createParticles(x, y) {
            for (let i = 0; i < 10; i++) {
                const particle = new Particle(x, y);
                particles.push(particle);
            }
        }

        function animate() {
            requestAnimationFrame(animate);
            ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();

                if (particles[i].size <= 0.3) {
                    particles.splice(i, 1);
                    i--;
                }
            }
        }

        canvas.addEventListener("mousemove", (e) => {
            const { offsetX, offsetY } = e;
            createParticles(offsetX, offsetY);
        });

        animate();
    </script>
</body>
</html>