一、特效概述
一个粒子星图网络背景，粒子会跟随鼠标形成连接和流动。 从下载体验看，它的优势在于文件清晰、没有外部依赖、可以直接用浏览器打开。用户可以先阅读本文了解实现方式，再进入演示页体验真实交互。
适用页面：首屏、功能展示、下载页、作品集、后台入口
文件组成：演示页、样式、脚本、截图、说明、元数据
维护方式：替换文案和颜色即可快速复用
二、适用场景
适合 AI、数据分析、云服务、监控大屏、智能搜索等需要表达连接、网络和实时信号的页面。
市场上常见的优秀前端动效不只是“炫”，更重要的是帮助用户理解层级、状态和反馈。本特效也按这个原则设计：视觉有记忆点，但不会把内容本身淹没。
三、制作思路
粒子在近距离自动连线，鼠标靠近后形成轻微引力，画面像一个可交互的数据场。
- 结构层：HTML 使用 canvas 作为背景层，正文信息固定在前景，方便保持视觉和内容的分工。
- 表现层：CSS 用深色背景、柔和径向光和大标题建立科技感，同时控制移动端文字位置。
- 交互层：JavaScript 维护粒子数组，每帧更新位置、阻尼、边界反弹和近距离连线透明度。
五、使用方法
- 解压 zip 后，直接双击 index.html 查看完整特效。
- 把 index.html 中的文字替换成自己的业务内容。
- 在 styles.css 中替换颜色变量、间距和尺寸，统一到项目视觉规范。
- 如果要嵌入已有页面，只复制对应 HTML 片段、CSS 片段和 script.js 中的初始化逻辑即可。
六、性能与兼容优化
实现中优先使用 transform、CSS 变量、requestAnimationFrame、IntersectionObserver 等浏览器友好的能力。涉及 canvas 的模板会限制设备像素比，减少高分屏绘制压力；样式中也保留 prefers-reduced-motion 降级，照顾不希望看到大量动画的用户。
七、二次开发建议
可把粒子数量与屏幕宽度绑定，或用真实数据点驱动粒子颜色和连线权重。
用户补充需求：无额外定制要求，本包按市场常见高质感动效方向自动生成。
