一、效果预览

一种屏幕上实现粒子漂浮然后鼠标光标可以与粒子交互的炫酷效果。

二、具体实现

首先需要一个js脚本文件，脚本的内容如下：
!function(){"use strict";function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function t(e,t){return e(t={exports:{}},t.exports),t.exports}var n=t(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var n=1;t.default=function(){return""+n++},e.exports=t.default});e(n);var o=t(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,n=null;return function(){for(var o=this,i=arguments.length,r=Array(i),a=0;an||r.x<0?-1:1,r.ya*=r.y>o||r.y<0?-1:1,t.fillStyle="rgba("+e.c.pointColor+")",t.fillRect(r.x-.5,r.y-.5,1,1),u=f+1;u=s.max/2&&(r.x-=.03*l,r.y-=.03*d),c=(s.max-v)/s.max,t.beginPath(),t.lineWidth=c/2,t.strokeStyle="rgba("+e.c.color+","+(c+.2)+")",t.moveTo(r.x,r.y),t.lineTo(s.x,s.y),t.stroke()))}),this.requestFrame(this.drawCanvas)}},{key:"destroy",value:function(){l(this.el),window.onmousemove=this.onmousemove,window.onmouseout=this.onmouseout,f(this.tid),this.canvas.parentNode.removeChild(this.canvas)}}]),e}();y.version="2.0.4";var w,b;new y(document.body,(w=document.getElementsByTagName("script"),{zIndex:(b=w[w.length-1]).getAttribute("zIndex"),opacity:b.getAttribute("opacity"),color:b.getAttribute("color"),pointColor:b.getAttribute("pointColor"),count:Number(b.getAttribute("count"))||99}))}();
然后，对该脚本文件进行处理，如将该文件导出为模块之类的处理，将该脚本文件放在src/utils文件夹下，以VUE框架开发为例，在你的前端vue代码中添加：
在script部分导入模块
import ParticleBackground from '@/utils/canvas-nest.js'; // 导入粒子类
在data（）return中初始化变量
particleInstance: null, // 用于存储粒子实例，便于销毁
在beforeDestory方法中对粒子进行销毁

  beforeDestroy() {
    // 销毁粒子背景
    if (this.particleInstance && this.particleInstance.destroy) {
      this.particleInstance.destroy();
    }
    // 移除粒子容器（粒子实例销毁时会自动移除 canvas，但容器需要手动移除）
    const container = document.getElementById('particle-container');
    if (container) container.remove();
  },

  mounted() {
    this.$nextTick(() => {
      this.initParticleBackground(); // 新增：初始化粒子背景
    });
  },

   initParticleBackground() {
      // 1. 创建粒子容器
      const container = document.createElement('div');
      container.id = 'particle-container';
      container.style.position = 'absolute';
      container.style.top = '0';
      container.style.left = '0';
      container.style.width = '100%';
      container.style.height = '100%';
      container.style.zIndex = '2';        // 确保粒子位于内容下方（内容 z-index 为 200）
      container.style.pointerEvents = 'none'; // 鼠标事件穿透，不影响卡片点击
      document.getElementById('login-container').appendChild(container);

      // 2. 实例化粒子背景，传入容器和配置
      this.particleInstance = new ParticleBackground(container, {
        color: '15,242,247',      // 线条颜色（RGB 格式）
        pointColor: '15,242,247', // 粒子颜色
        opacity: 0.9,          // 透明度
        zIndex: 2,            // 画布自身的 z-index，与容器保持一致
        count: 250              // 粒子数量
      });
    },

，我也是在这里踩了坑。
同时可通过参数调整粒子颜色、透明度、高度（防止被其他物体覆盖）、数量等，随后运行前端项目就可以在前端页面看到粒子效果啦！