html粒子代码灵感。

Abby1225

于 2024-07-07 16:19:44 发布

阅读量559

点赞数 25

文章标签： html 前端

本文链接：https://blog.csdn.net/Abby1225/article/details/140247311

版权

为了创建一个粒子效果，你可以使用像 `particles.js` 这样的JavaScript库，它允许你通过简单的配置来生成复杂的粒子动画。以下是一个基本的例子，展示了如何在你的HTML页面中集成`particles.js`：

首先，你需要在你的项目中包含 `particles.js` 的 JavaScript 文件和配置文件（通常是一个JSON文件）。你可以从GitHub或其他资源下载这些文件。

然后，在你的HTML文件中添加以下内容：

```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>粒子效果</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            overflow: hidden;

        }

        #particles-js {

            position: absolute;

            width: 100%;

            height: 100%;

            background-color: #111;

        }

    </style>

</head>

<body>

    <div id="particles-js"></div>



    <!-- 引入 particles.js -->

    <script src="particles.js"></script>



    <!-- 初始化 particles.js，假设你有一个名为 particlesjs-config.json 的配置文件 -->

    <script>

        particlesJS.load('particles-js', 'particlesjs-config.json');

    </script>

</body>

</html>

```

在上面的代码中，`<div id="particles-js"></div>` 是粒子动画的容器。`particles.js` JavaScript 文件应该放在与你的HTML文件相同的目录下，或者你也可以使用CDN链接来引入它。

`particlesjs-config.json` 是你的粒子动画的配置文件，它定义了粒子的各种属性和动画效果。以下是一个简单的配置文件的例子：

```json

{

  "particles": {

    "number": {

      "value": 80,

      "density": {

        "enable": true,

        "value_area": 800

      }

    },

    "color": {

      "value": "#ffffff"

    },

    "shape": {

      "type": "circle",

      "stroke": {

        "width": 0,

        "color": "#000000"

      },

      "polygon": {

        "nb_sides": 5

      },

      "image": {

        "src": "img/github.svg",

        "width": 100,

        "height": 100

      }

    },

    "opacity": {

      "value": 0.5,

      "random": false,

      "anim": {

        "enable": false,

        "speed": 1,

        "opacity_min": 0.1,

        "sync": false

      }

    },

    "size": {

      "value": 3,

      "random": true,

      "anim": {

        "enable": false,

        "speed": 40,

        "size_min": 0.1,

        "sync": false

      }

    },

    "line_linked": {

      "enable": true,

      "distance": 150,

      "color": "#ffffff",

      "opacity": 0.4,

      "width": 1

    },

    "move": {

      "enable": true,

      "speed": 2,

      "direction": "none",

      "random": false,

      "straight": false,

      "out_mode": "out",

      "bounce": false,

      "attract": {

        "enable": false,

        "rotateX": 600,

        "rotateY": 1200

      }

    }

  },

  "interactivity": {

    "detect_on": "canvas",

    "events": {

      "onclick": {

        "enable": true,

        "mode": "push"

      },

      "onresize": {

        "enable": true,

        "mode": "out"

      }

    },

    "modes": {

      "grab": {

        "distance": 400,

        "line_linked": {

          "opacity": 1

        }

      },

      "bubble": {

"`bubble` 模式是 `particles.js` 中的一个交互模式，当启用时，点击或触摸粒子时，它们会模拟气泡效果。如果你想在配置文件中启用 `bubble` 模式，你可以像下面这样设置：

首先，确保你的 `particlesjs-config.json` 文件包含 `interactivity` 部分，并且你已经定义了 `events` 下的 `onclick` 事件。然后，你可以在 `modes` 部分下添加或修改 `bubble` 配置。

这是一个带有 `bubble` 模式的 `particlesjs-config.json` 示例：

```json

{

  "particles": {

    "number": {

      "value": 80,

      "density": {

        "enable": true,

        "value_area": 800

      }

    },

    "color": {

      "value": "#ffffff"

    },

    // 其他粒子属性...

  },

  "interactivity": {

    "detect_on": "canvas",

    "events": {

      "onclick": {

        "enable": true,

        "mode": "bubble" // 设置为 "bubble" 以启用点击时的气泡效果

      },

      "onresize": {

        "enable": true,

        "mode": "out"

      }

    },

    "modes": {

      "bubble": {

        "distance": 400, // 粒子之间气泡效果的触发距离

        "size": 40, // 气泡的大小

        "duration": 2, // 气泡效果的持续时间（秒）

        "opacity": 0.8, // 气泡的透明度

        "speed": 3 // 气泡移动的速度

      },

      // 其他模式配置...

    },

    "repulse": {

      "distance": 200, // （可选）如果还启用了其他模式，比如 "repulse"，你可以设置它的属性

      "duration": 0.4

    },

    // 其他交互性配置...

  },

  // 其他配置...

}

```

确保将 `particles.js` 脚本和此配置文件正确链接到你的HTML文件中，并且文件路径是正确的。

现在，当你的网页加载时，`particles.js` 将会创建一个带有粒子动画的canvas元素，并且当你点击粒子时，会触发一个气泡效果。这个效果可以通过调整 `bubble` 模式下的配置属性来定制，如距离、大小、持续时间、透明度和速度等。

要在HTML中实现粒子效果，您通常会需要一个外部的JavaScript库，比如`particles.js`。下面是一个基本的HTML示例，演示了如何使用`particles.js`来创建粒子动画：

1. 首先，确保您已经从`particles.js`的官方网站或GitHub仓库下载了所需的文件。这通常包括一个`particles.js`文件和一个JSON配置文件（比如`particles.json`）。

2. 创建一个HTML文件，并添加以下代码：

```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>粒子效果示例</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            overflow: hidden;

        }

        /* 可选样式：将canvas容器居中对齐 */

        #particles-js {

            position: absolute;

            width: 100%;

            height: 100%;

            background-color: #111;

            display: flex;

            justify-content: center;

            align-items: center;

        }

    </style>

</head>

<body>

    <!-- 粒子动画的容器 -->

    <div id="particles-js"></div>



    <!-- 引入 particles.js -->

    <script src="particles.js"></script>



    <!-- 初始化 particles.js，使用particles.json作为配置文件 -->

    <script>

        particlesJS.load('particles-js', 'particles.json');

    </script>

</body>

</html>

```

3. 创建一个名为`particles.json`的配置文件，并在同一目录下放置该文件。`particles.json`应该包含配置粒子的属性和行为的信息。以下是一个简单的配置示例：

```json

{

  "particles": {

    "number": {

      "value": 80,

      "density": {

        "enable": true,

        "value_area": 800

      }

    },

    "color": {

      "value": "#ffffff"

    },

    "shape": {

      "type": "circle",

      "stroke": {

        "width": 0,

        "color": "#000000"

      },

      "polygon": {

        "nb_sides": 5

      },

      "image": {

        "src": "img/github.svg",

        "width": 100,

        "height": 100

      }

    },

    "opacity": {

      "value": 0.5,

      "random": false,

      "anim": {

        "enable": false,

        "speed": 1,

        "opacity_min": 0.1,

        "sync": false

      }

    },

    "size": {

      "value": 3,

      "random": true,

      "anim": {

        "enable": false,

        "speed": 40,

        "size_min": 0.1,

        "sync": false

      }

    },

    "line_linked": {

      "enable": true,

      "distance": 150,

      "color": "#ffffff",

      "opacity": 0.4,

      "width": 1

    },

    "move": {

      "enable": true,

      "speed": 2,

      "direction": "none",

      "random": false,

      "straight": false,

      "out_mode": "out",

      "bounce": false,

      "attract": {

        "enable": false,

        "rotateX": 600,

        "rotateY": 1200

      }

    }

  },

  "interactivity": {

"detect_on": "canvas

在HTML中直接实现粒子效果通常需要结合JavaScript（以及可能的CSS和Canvas）来完成。HTML本身只用于定义网页的结构，而粒子效果是动态的，需要编程来实现。

以下是一个简单的基于Canvas和JavaScript的粒子系统示例代码：

```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>粒子效果</title>

    <style>

        body { margin: 0; overflow: hidden; }

        canvas { display: block; background: #000; }

    </style>

</head>

<body>

    <canvas id="particleCanvas"></canvas>



    <script>

        const canvas = document.getElementById('particleCanvas');

        const ctx = canvas.getContext('2d');

        const particles = [];



        // 设置画布大小

        canvas.width = window.innerWidth;

        canvas.height = window.innerHeight;



        // 创建粒子

        function createParticle() {

            const particle = {

                x: Math.random() * canvas.width,

                y: Math.random() * canvas.height,

                size: Math.random() * 2 + 1, // 粒子大小

                speedX: Math.random() * 2 - 1, // x轴速度

                speedY: Math.random() * 2 - 1, // y轴速度

                color: `hsl(${Math.random() * 360}, 100%, 50%)` // 随机颜色

            };

            particles.push(particle);

        }



        // 初始化粒子

        for (let i = 0; i < 100; i++) {

            createParticle();

        }



        // 粒子动画

        function animate() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);



            particles.forEach(particle => {

                // 更新粒子位置

                particle.x += particle.speedX;

                particle.y += particle.speedY;



                // 如果粒子离开画布，重新定位到画布的另一侧

                if (particle.x < 0 || particle.x > canvas.width || particle.y < 0 || particle.y > canvas.height) {

                    createParticle(); // 可以选择创建一个新的粒子

                    // 或者仅仅重置当前粒子的位置

                    // particle.x = Math.random() * canvas.width;

                    // particle.y = Math.random() * canvas.height;

                    particles.splice(particles.indexOf(particle), 1); // 从数组中移除当前粒子

                }



                // 绘制粒子

                ctx.beginPath();

                ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);

                ctx.fillStyle = particle.color;

                ctx.fill();

            });



            requestAnimationFrame(animate); // 递归调用以保持动画

        }



        animate();

    </script>

</body>

</html>

```

这个示例代码创建了一个简单的粒子系统，粒子在画布上随机移动。当粒子离开画布时，它会从粒子数组中移除（或者你可以选择重新定位粒子）。你可以根据需要对这个示例进行修改和扩展。

要创建一个HTML粒子效果，你通常会使用HTML的`<canvas>`元素来绘制粒子，并通过JavaScript来控制这些粒子的行为。以下是一个简单的HTML粒子动画的示例代码：

```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>粒子动画</title>

    <style>

        body, html {

            margin: 0;

            padding: 0;

            height: 100%;

            overflow: hidden;

        }

        canvas {

            display: block;

            background: #000;

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

    <canvas id="particleCanvas"></canvas>



    <script>

        const canvas = document.getElementById('particleCanvas');

        const ctx = canvas.getContext('2d');

        const particles = [];



        // 设置画布大小

        canvas.width = window.innerWidth;

        canvas.height = window.innerHeight;



        // 粒子构造函数

        function Particle(x, y, size, speedX, speedY, color) {

            this.x = x;

            this.y = y;

            this.size = size || Math.random() * 2 + 1;

            this.speedX = speedX || (Math.random() - 0.5) * 2;

            this.speedY = speedY || (Math.random() - 0.5) * 2;

            this.color = color || `hsl(${Math.random() * 360}, 100%, 50%)`;

        }



        // 粒子更新和绘制

        Particle.prototype.update = function() {

            this.x += this.speedX;

            this.y += this.speedY;



            // 如果粒子离开画布，重新定位

            if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) {

                this.x = Math.random() * canvas.width;

                this.y = Math.random() * canvas.height;

            }



            // 绘制粒子

            ctx.beginPath();

            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);

            ctx.fillStyle = this.color;

            ctx.fill();

        };



        // 初始化粒子

        function initParticles(count) {

            for (let i = 0; i < count; i++) {

                const particle = new Particle(

                    Math.random() * canvas.width,

                    Math.random() * canvas.height

                );

                particles.push(particle);

            }

        }



        // 动画循环

        function animate() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);



            particles.forEach(particle => {

                particle.update();

            });



            requestAnimationFrame(animate);

        }



        // 初始化并启动动画

        initParticles(200); // 创建200个粒子

        animate();

    </script>

</body>

</html>

```

这个示例中定义了一个`Particle`构造函数来创建粒子对象，并为粒子对象定义了一个`update`方法来更新其位置和绘制到画布上。`initParticles`函数用于初始化粒子，`animate`函数用于循环更新和绘制所有粒子。最后，通过调用`initParticles`和`animate`函数来启动粒子动画。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>粒子爱心</title>

</head>

<style>

  html,

  body {

    height: 100%;

    padding: 0;

    margin: 0;

    background: #000;

  }

  img {

    display: block;

    margin: 0 auto;

  }

  label {

    display: block;

    margin: 0 auto;

    color: pink;

    font-size: 20px;

    padding-right: 5px;

    animation: mymove 2.5s infinite;

    -webkit-animation: mymove 2.5s infinite;

  }

  @keyframes mymove {

    50% {

      font-size: 40px;

    }

  }

  @-webkit-keyframes mymove {

    50% {

      font-size: 40px;

    }

  }

  .middle {

    width: 100%;

    height: 100vh;

    display: flex;

    align-items: center;

  }

  .middle2 {

    position: absolute;

    z-index: 2;

    width: 100%;

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

  }

</style>

<link rel="stylesheet" href="./style.css">

<body>

  <div class="middle">

    <div class="middle2">

    </div>

    <img src="https://pic.imgdb.cn/item/642547f5a682492fcc15cd5d.gif" width="1000" height="650" />

  </div>

</body>

</html>

代码讲解

这段代码是一个基本的HTML结构，用于展示一个带有动画效果的网页，主要内容是一个粒子爱心的GIF图片。

HTML结构

声明文档类型为HTML5。设定语言为英文。区块包含了文档的元数据和样式链接。标签设置了字符集、兼容性视图以及响应式视图的初始缩放。

通过

页面内容

页面主体部分由一个.middle容器构成，里面直接嵌套了一个空的.middle2容器以及一个标签。GIF图片的URL指向一个外部资源，展示了一个粒子组成的爱心动画，尺寸被设定为宽1000px，高650px。

要想观看更多，请咨询”https://blog.csdn.net/web18296061989/article/details/123149275”

Abby1225

关注

25
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
html粒子代码灵感。

首先，确保你的 `particlesjs-config.json` 文件包含 `interactivity` 部分，并且你已经定义了 `events` 下的 `onclick` 事件。现在，当你的网页加载时，`particles.js` 将会创建一个带有粒子动画的canvas元素，并且当你点击粒子时，会触发一个气泡效果。为了创建一个粒子效果，你可以使用像 `particles.js` 这样的JavaScript库，它允许你通过简单的配置来生成复杂的粒子动画。区块包含了文档的元数据和样式链接。
复制链接

扫一扫