粒子特效

这是一个飘雪粒子特效 登录页面可看到效果

使用方法

<fx-particles mode="light" />

FxParticles 属性列表

属性名	说明	类型	默认值
mode	粒子模式是暗黑模式还是亮色模式	string | 'light' | 'dark' | 'other'	light
options	粒子模式为 'other' 的时候生效	-	可不填

FxParticles 事件列表

事件名	说明	回调参数	类型
particles-loaded	粒子特效加载完成时触发，返回一个 container 实例对象	container	Function

options 参数

配置参数可参考 https://particles.js.org/

示例

const options = {
  fpsLimit: 120,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: 'push', // 可用的click模式有: "push", "remove", "repulse", "bubble"。
      },
      onHover: {
        enable: true,
        mode: 'repulse', // 可用的hover模式有: "grab", "repulse", "bubble"。
      },
    },
    modes: {
      bubble: {
        distance: 400, //原子抓取泡沫效果之间的距离
        duration: 2, // 原子抓取泡沫效果之间的大小
        opacity: 0.8, //原子抓取泡沫效果之间的持续事件
        size: 40, //原子抓取泡沫效果透明度
      },
      push: {
        quantity: 4, //粒子推出的数量
      },
      repulse: {
        distance: 100, //击退效果距离
        duration: 0.4, //击退效果持续事件
      },
    },
  },
  particles: {
    color: {
      value: '#ffffff',
    },
    links: {
      color: '#ffffff', // 线条颜色。
      distance: 150, // 线条长度
      enable: true, // 是否有线条
      opacity: 1, // 线条透明度。
      width: 1, // 线条宽度。
    },
    move: {
      direction: 'none', //原子移动方向   "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"
      enable: true, //原子移动
      outModes: 'bounce', //是否移动出画布
      random: false, //移动随机方向
      speed: 6, // 粒子运动速度。
      straight: false, //直接移动
    },
    number: {
      density: {
        enable: true, //启用粒子的稀密程度
      },
      value: 80, // 粒子数量。
    },
    opacity: {
      value: 1, // 粒子透明度。
    },
    shape: {
      type: 'star', // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
    },
    size: {
      value: { min: 1, max: 5 },
    },
  },
  detectRetina: true,
};