vue3使用tsParticles实现爆开五彩碎纸屑动效，简单高效免费（撒花特效、粒子效果）

实现效果：

tsParticles | Confetti Preset | JavaScript Particles, Confetti and Fireworks animations for your website tsParticles - Easily create highly customizable particles, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.https://particles.js.org/samples/presets/confetti (点击链接查看动态效果，如果链接打不开请打开vpn即可查看)

实现步骤：

1、首先安装依赖：

 npm i @tsparticles/vue3   
 npm i @tsparticles/preset-confetti

2、创建一个starBox.vue文件：

<template>
  <div>
      <vue-particles id="tsparticles" @particles-loaded="particlesLoaded" :options="options" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const options = ref({
  particles: {
     color: {
      value: ["#0000ff", "#00ff00", "#ff0000", "#ffff00", "#ff00ff"], // 自定义颜色，使用默认的就注释掉color这个变量
    },
    number: {
      value: 100, // 设置粒子的数量
    },
  },
  emitters: {
    life: {
      count: 1,  //必须是duration不为0，设置count的发射次数才能生效
      duration: 1, //设置为0则一直发射
    },
    //如果使用默认的动态样式，可以删除掉rate变量
    rate: {
      quantity: 2, // 每次发射的碎纸屑数量
      delay: 0.1,  // 每次发射的间隔时间
    },
    position: {
      x: 50, //爆开的起止x轴位置
      y: 25, //爆开的起止y轴位置
    },
  },
  preset: "confetti",
});
</script>

（注：以上代码中options变量里的数值，可以根据自己的需求随意调节）

3.main.js文件

//挂载五彩碎纸屑特效
import Particles from '@tsparticles/vue3'；
import { loadConfettiPreset } from '@tsparticles/preset-confetti'；

const app = createApp(App);
//使用Particles
app.use(Particles,{
    init:async(engine)=>{
        await loadConfettiPreset(engine);
    }
});

这样就是先爆开的五彩碎纸屑辣~~~