背景粒子动效

 <!-- 粒子动效父组件 -->
 <Particles/>



<!-- 子组件 -->
<template>
  <Particles
    id="tsparticles"
    :options="{
      fpsLimit: 120,
      interactivity: {
        modes: {
          bubble: {
            distance: 400,
            duration: 2,
            opacity: 0.8,
            size: 40,
          },
          push: {
            quantity: 4,
          },
          repulse: {
            distance: 200,
            duration: 0.4,
          },
        },
      },
      particles: {
        color: {
          value: '#ffffff',
        },
        links: {
          color: '#ffffff',
          distance: 150,
          enable: true,
          opacity: 0.05,
          width: 1,
        },
        move: {
          direction: 'none',
          enable: true,
          outMode: 'bounce',
          random: false,
          speed: 1,
          straight: false,
        },
        number: {
          density: {
            enable: true,
            area: 1000,
          },
          value: 50,
        },
        opacity: {
          value: 0.5,
        },
        shape: {
          type: 'circle',
        },
        size: {
          random: true,
          value: 2,
        },
      },
      detectRetina: true,
    }"
  />
</template>

// main.js 引入  npm install vue3-particles
// 背景粒子特效
import Particles from "vue3-particles";

app.use(Particles)