---

前言

官方還有很多漂亮的特效，但是vue3只有一個demo，例如我前面實現的兩個頁面就耗費了一些時間，今天記錄一下tsparticles官方內置的幾個特效的使用方法，一般這幾個就足夠用了。

---

一、怎樣使用官方提供的特效

例如想使用preset-stars，先安裝

pnpm i @tsparticles/preset-stars

新建頁面preset-star.vue

<template><div><vue-particles id="tsparticles"  :options="particlesOptions" /></div>
</template><script setup lang="ts" name="">const particlesOptions = {particles: {shape: {type: "star", // starting from v2, this require the square shape script},},preset: "stars",}
</script><style lang='scss' scoped>
</style>

main.ts中：

import { loadStarsPreset } from "@tsparticles/preset-stars";//使用Particles
app.use(Particles, {init: async engine => {await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need itawait loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animationsawait loadStarsPreset(engine); },})

看看，簡簡單單就來效果了：

二、海葵特效

pnpm i @tsparticles/preset-sea-anemone

tsParticles.load({id: "tsparticles",options: {particles: {shape: {type: "square", // starting from v2, this require the square shape script},},preset: "seaAnemone",},
});

就舉這兩個例子介紹一下使用方法吧，想要其他特效可以去官網翻翻，還有說明一點這些都是動畫特效，運行起來比我截圖漂亮多了。

---

總結

世間萬物皆為我所用，非我所屬。