终极指南：用particles.js打造惊艳的网页粒子特效

2026-02-07 04:12:59作者：何将鹤

还在为网页动画效果发愁？🚀 particles.js让你只用几行代码就能创建专业级的粒子动画！这个轻量级JavaScript库就像是为网页设计师量身定制的魔法工具箱，无需复杂编程知识，就能让静态页面瞬间活起来。无论你是前端新手还是资深开发者，都能在5分钟内上手，让你的网站脱颖而出！

🎯 快速入门：三步骤创建你的第一个粒子世界

第一步：引入核心库文件

首先，在你的HTML文件中引入particles.js。可以选择本地文件或CDN方式：

<!-- 使用本地文件 -->
<script src="particles.js"></script>

<!-- 或者使用CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/particles.js/2.0.0/particles.min.js"></script>

第二步：设置Canvas容器

创建一个div元素作为粒子效果的舞台，记得设置合适的宽高和背景色：

<div id="particle-universe" 
     style="width: 100%; height: 500px; background: #1a1a2e;">
</div>

第三步：激活粒子魔法

通过JavaScript初始化粒子系统，你可以直接内联配置或引用外部JSON文件：

// 内联配置方式
particlesJS('particle-universe', {
  particles: {
    number: { value: 100 },
    color: { value: "#e94560" },
    shape: { type: "circle" },
    opacity: { value: 0.7 },
    size: { value: 4 },
    move: { enable: true, speed: 3 }
});

🔧 粒子系统配置全解析：从基础到高级

粒子外观定制：打造独特的视觉风格

粒子的外观配置就像调色板，让你随心所欲地创造各种视觉效果：

{
  "particles": {
    "number": {
      "value": 120,
      "density": { "enable": true, "value_area": 1000 }
    },
    "color": { 
      "value": ["#ff9a3c", "#ff6b6b", "#48dbfb"] 
    },
    "shape": {
      "type": "circle",
      "stroke": { "width": 2, "color": "#ff6b6b" }
    },
    "opacity": {
      "value": 0.8,
      "random": true
    },
    "size": {
      "value": 5,
      "random": true
    }
  }
}

运动行为控制：让粒子拥有生命

粒子的运动配置决定了它们的"性格"，是活泼好动还是沉稳优雅：

"move": {
  "enable": true,
  "speed": 4,
  "direction": "none",
  "random": true,
  "straight": false,
  "out_mode": "bounce",
  "bounce": true,
  "attract": {
    "enable": true,
    "rotateX": 2000,
  "rotateY": 2000
}

🌟 实战演练：创建银河系粒子特效

让我们用一个实际案例来展示particles.js的强大功能。我们将创建一个类似银河系的粒子系统，包含中心引力源和环绕的"恒星"：

银河系配置文件

创建 galaxy-effect.json 配置文件：

{
  "particles": {
    "number": {
      "value": 150,
      "density": { "enable": true, "value_area": 1200 }
    },
    "color": {
      "value": ["#ffd700", "#ffffff", "#87ceeb", "#ff69b4"] 
    },
    "shape": { "type": "circle" },
    "opacity": { "value": 0.8, "random": true },
    "size": {
      "value": [20, 2, 3, 4, 2],
      "random": true
    },
    "line_linked": {
      "enable": true,
      "distance": 120,
      "color": "#ffffff",
      "opacity": 0.3,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "bounce",
      "bounce": true,
      "attract": {
        "enable": true,
        "rotateX": 2500,
        "rotateY": 2500
      }
    }
  },
  "interactivity": {
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "bubble"
      }
    },
    "modes": {
      "grab": { "distance": 180 },
      "bubble": { "size": 30, "distance": 250 }
  },
  "retina_detect": true
}

在网页中实现银河系效果

<!DOCTYPE html>
<html>
<head>
  <title>银河系粒子特效</title>
  <style>
    #galaxy-container {
      width: 100%;
      height: 600px;
      background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
    }
  </style>
</head>
<body>
  <div id="galaxy-container"></div>
  
  <script src="particles.js"></script>
  <script>
    particlesJS.load('galaxy-container', 'galaxy-effect.json', function() {
      console.log('🌌 银河系粒子特效已加载！');
    });
  </script>
</body>
</html>

🎮 交互魔法：让用户与粒子对话

particles.js最令人兴奋的功能就是丰富的交互效果。用户可以通过鼠标与粒子系统进行实时互动：

交互配置详解

"interactivity": {
  "detect_on": "canvas",
  "events": {
    "onhover": {
      "enable": true,
      "mode": "repulse"
    },
    "onclick": {
      "enable": true,
      "mode": "push"
    }
  },
  "modes": {
    "repulse": { "distance": 150 },
    "push": { "particles_nb": 6 }
  }
}

交互模式大集合

排斥模式：鼠标悬停时，粒子像被磁铁排斥一样四散开来
推送模式：点击时添加新粒子，创造粒子喷泉效果
抓取模式：鼠标周围形成引力场，粒子被"抓住"并形成连线网络
气泡模式：鼠标周围粒子膨胀，形成梦幻的气泡效果

⚡ 性能优化秘籍：让动画流畅如丝

粒子数量智能控制

根据设备性能调整粒子数量，确保流畅体验：

"number": {
  "value": 80,  // 桌面端推荐
  "density": {
    "enable": true,
    "value_area": 800  // 数值越大粒子越稀疏
}

绘制效率提升技巧

减少连线数量：增大 line_linked.distance
简化粒子形状：优先使用圆形
关闭不必要的动画效果

🛠️ 进阶技巧：自定义物理规则

对于想要深度定制的高级用户，可以直接修改 particles.js 源码。比如在核心库中找到运动计算函数，调整引力公式或碰撞检测逻辑，创造完全独特的物理效果。

📚 资源宝库：一站式学习指南

项目提供了完整的示例和文档：

核心库文件：particles.js
演示页面：demo/index.html
配置示例：demo/particles.json
详细文档：README.md

🎉 结语：开启你的粒子创作之旅

particles.js就像一把神奇的画笔，让你在网页这个数字画布上自由挥洒创意。无论是科技感的背景、梦幻的登录页面，还是引人入胜的产品展示，粒子特效都能为你的项目增添独特的魅力。

现在就动手试试吧！从简单的配置开始，逐步探索各种可能性。记住，最好的学习方式就是实践 - 打开编辑器，复制上面的代码，看看你的第一个粒子世界是如何诞生的！✨

想要获取更多示例和灵感？不妨查看项目中的 demo 文件夹，那里有现成的效果可以直接使用和修改。祝你在粒子特效的创作道路上越走越远！

particles.js

A lightweight JavaScript library for creating particles

项目地址：https://gitcode.com/gh_mirrors/pa/particles.js

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

336

178

ops-math

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

Ascend Extension for PyTorch

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

agent-studio

openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力

本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。

终极指南：用particles.js打造惊艳的网页粒子特效

🎯 快速入门：三步骤创建你的第一个粒子世界

第一步：引入核心库文件

第二步：设置Canvas容器

第三步：激活粒子魔法

🔧 粒子系统配置全解析：从基础到高级

粒子外观定制：打造独特的视觉风格

运动行为控制：让粒子拥有生命

🌟 实战演练：创建银河系粒子特效

银河系配置文件

在网页中实现银河系效果

🎮 交互魔法：让用户与粒子对话

交互配置详解

交互模式大集合

⚡ 性能优化秘籍：让动画流畅如丝

粒子数量智能控制

绘制效率提升技巧

🛠️ 进阶技巧：自定义物理规则

📚 资源宝库：一站式学习指南

🎉 结语：开启你的粒子创作之旅

热门内容推荐

最新内容推荐

项目优选

终极指南：用particles.js打造惊艳的网页粒子特效

🎯 快速入门：三步骤创建你的第一个粒子世界

第一步：引入核心库文件

第二步：设置Canvas容器

第三步：激活粒子魔法

🔧 粒子系统配置全解析：从基础到高级

粒子外观定制：打造独特的视觉风格

运动行为控制：让粒子拥有生命

🌟 实战演练：创建银河系粒子特效

银河系配置文件

在网页中实现银河系效果

🎮 交互魔法：让用户与粒子对话

交互配置详解

交互模式大集合

⚡ 性能优化秘籍：让动画流畅如丝

粒子数量智能控制

绘制效率提升技巧

🛠️ 进阶技巧：自定义物理规则

📚 资源宝库：一站式学习指南

🎉 结语：开启你的粒子创作之旅

相关内容推荐

热门内容推荐

最新内容推荐

项目优选