企业官网建设流程全解析

tsParticles 完整指南：如何用免费粒子库给网页加动态背景

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles

tsParticles 是一个免费、零依赖的 TypeScript 粒子动画库，专门给你的网页做轻量级动态粒子背景。彩屑、烟花、下雪这些效果，几行配置就能跑起来，还能直接接到 React、Vue 等主流框架里。

🎯 它能为你的页面做什么

把它想象成一张"会动的贴纸"：贴到页面任意位置，那块背景立刻就活了。你不用自己写画布（canvas 就是浏览器里画东西的那块区域）逻辑，也不用算每一颗点往哪飞——只要告诉它"我要下雪、来 80 颗、颜色偏蓝"，剩下的交给它。

对新手最友好的一点：它不挑项目。无论是一页纯 HTML，还是 React 单页应用，都能塞进去，而且不引入任何额外依赖。

🚀 从零到第一个粒子效果（最快安装方式）

有两条路，按习惯选一条：

• CDN 引入：适合纯静态页面，加一行<script>标签就能用，无需构建工具。
• npm 安装：适合 React/Vue 项目，在终端执行npm install @tsparticles/engine，再在代码里import调用。

最小可用示例（CDN 方式）：

<div id="tsparticles"></div> <script> tsParticles.load({ id: "tsparticles", options: { particles: { number: { value: 60 }, color: { value: "#38bdf8" }, move: { enable: true } } } }); </script>

页面打开，60 颗浅蓝色的点就飘起来了，就这么简单。

✨ 开箱即用的效果：预设与鼠标交互

官方内置了一批开箱即用的预设，装上对应包直接用，常见的场景基本都覆盖了：

• 彩屑（Confetti）：庆典、生日、抽奖弹屏
• 烟花（Fireworks）：节日氛围、活动倒计时
• 下雪（Snow）：冬季主题、圣诞页面

更妙的是它天生支持鼠标交互：粒子可以被鼠标吸引、排斥、点击时炸开。你不需要自己监听坐标、算距离，配置里开个开关就行——这是做 Web 粒子效果时最容易出彩的一招。

🔧 深度自定义：属性、运动参数与响应式适配

嫌预设不够"自己的味道"？每一项都能调：

• 粒子属性：数量、颜色（支持多色混合）、形状（圆、方块、文字、图片……）、大小、透明度都能单独控制。
• 运动参数：速度、方向、是否随机、边界行为（粒子撞到边缘是消失、反弹还是穿过去）都可以写进配置。
• 响应式适配：能按屏幕尺寸切换不同配置，手机上少放点、电脑上多放点，保证各设备都顺眼。

所有可选参数都能在官方配置手册里查到：markdown/Options.md。

🧩 框架集成：React / Vue 生态接入

它是模块化设计，只加载你需要的功能，所以体积极小，不会拖慢首屏。各主流框架都有官方组件：

• React：@tsparticles/react，一个组件传配置即可
• Vue：Vue2 用@tsparticles/vue2，Vue3 用@tsparticles/vue3
• 其余 Angular、Svelte、jQuery、Preact、Solid、Web Components 等也都有对应包

以 React 为例，写个<Particles>组件、把配置当 props 传进去就行，做 React 粒子动画基本零门槛。

📍 用在哪里：几个真实落地场景

• 网站动态背景：首页、落地页加一层会动的背景，用户停留时长明显上去。
• 节日与活动页：生日、新年、抽奖，用彩屑/烟花一键烘托气氛。
• 交互动效与数据展示：配合鼠标交互做引导、做可视化背景，比静态图更有记忆点。

更多细节可看项目主文档：README.md，迁移老项目参考 markdown/pjsMigration.md。

tsParticles 把"从零画粒子"这件事变成了"填几行配置"。先拿一个预设跑起来看效果，再一点点调成自己的风格，是你最快上手的姿势。

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles