初始particles库(动态背景)项目初始化 1.css 样式重置(normalize.css) (1)安装 npm

项目初始化

1.css 样式重置(normalize.css)

(1)安装 npm install normalize.css (2)引入 import 'normalize.css' 当然也可以手动重置

动态背景

1.安装 tsparticles 库 npm install vue3-particles

2.引入 import Particles from"vue3-particles" createApp().use(Particles)

3.TS 的话引入声命文件 declare module "vue3-particles" 使用 Particles 组件

particlesInit 初始化函数
option 配置项参数分析

background: 背景设置可以是 color 应该也可以是 img
fpsLimit 应该是动画的帧数浏览默认是 60 github 上是 120
particles: 这里的配置就是设置动态的样式了
1. number 颗粒的数量
  1. value 值
  2. density 颗粒的细密程度
    - enable 是否开启
    - value_area: 区域散布密度大小
2. color 颗粒颜色
  - value 值
3. shape 形状
  - type 原子的形状 default: circle 这个好看 star
  - stroke 一笔画成
    - width: 原子宽度
    - color: 原子颜色
4. opacity 不透明度
  - value:设置其值
  - random: 是否开启水机透明度
  - anim 应该是设置动画 animation 的缩写
    - enable 是否开启
    - speed 动画速度
    - opacicy_min 渐变动画不透明度
    - sync 是否同步吧
5. size 大小
  - value 值
  - random 大小是否随机
  - anim
    - enable 是否开启
    - speed 动画速度
    - opacicy_min 渐变动画不透明度
    - sync 和上边的一样.....同 opacity(透明度)
6. line_linked 颗粒之间连接的线
  - enable 是否使用连接线
  - distance 连接线距离
  - color 线条颜色
  - opcity 透明度
  - width 宽度
7. move
  - enable 原子移动
  - speed 原子移动速度
  - direction 原子移动方向
  - random 原子移动方向随机
  - straight 自己移动
  - out_mode 移动是在画布里还是外默认 out
  - bounce 是否跳动移动
  - attract 吸引
    - enable 是否开启
    - rotateX 原子之间吸引 X 水平距离
    - rotateY 原子之间吸引 Y 水平距离
interactivity:作用
1. detect_on: "canvas",原子之间互动检测"canvas","window"
2. events: 事件
  - onhover 鼠标悬停事件
    - enable 是否悬停
    - mode 悬停后的模式 "grab"抓取 "bubble"泡沫"repulse"击退
  - onclick 点击事件
    - enable 是否开启点击事件
    - mode 点击后的效果同上
  - resize 互动事件调整
3. modes 模式设置
  - grab (前提上边的模式选取了 grab 生效)抓取设置
    - distance 距离原子互动抓取的距离
    - line_linked 颗粒之间的连接线样式
  - bubble 泡沫模式的样式
    - distance 距离
    - size 大小
    - duration 时间
    - opacity 透明度
    - speed ***
  - repulse 击退的模式样式设置
    - disance 距离
    - duration 击退持续时间
  - push 粒子推出模式效果
    - particles_nb 粒子推出的数量
  - remove 粒子移除模式效果
    - particles_nb 粒子移除数量
retina_detect 视觉检测