当前位置：首页 > news >正文

Vue3+Ts整合tsParticles实现炫酷的粒子特效c

news 2026/5/13 0:11:42

1、可以先看看官网的例子tsParticles挑一个自己喜欢的粒子特效

2、安装依赖

pnpm i @tsparticles/vue3 @tsparticles/slim

3、配置特效

修改main.ts文件

// 引入粒子特效
import { loadSlim } from '@tsparticles/slim';
import Particles from '@tsparticles/vue3';const app = createApp(App);// 注册粒子特效
app.use(Particles as any, {init: async (engine: any) => {await loadSlim(engine);},
});

4、我们去创建一个 `particles.ts` 文件，用作配置

例如：我就在src/utils/particles.ts下创建的particles.ts文件

5、`particles.ts`文件的内容如下（可以按照自己喜欢的方式配置）

注意：看不懂没关系，交给AI啦，让他按照你的要求配置

export const particlesOptions = {fpsLimit: 120,fullScreen: {enable: true,zIndex: -1, // 确保粒子在最底层},detectRetina: true,particles: {number: {value: 80,density: {enable: true,area: 1200,},},color: {value: ['#0047ab', '#151b54'], // 更改粒子颜色为更深的蓝色animation: {enable: true,speed: 1,sync: false,},},shape: { type: 'circle' },opacity: {value: { min: 0.3, max: 0.8 }, // 提高透明度范围animation: { enable: true, speed: 2, minimumValue: 0.3 },},size: {value: { min: 2, max: 6 }, // 增大粒子尺寸animation: { enable: true, speed: 20, minimumValue: 2 },},links: {enable: true,distance: 150,color: { value: '#1e4870ff' }, // 改为白色以提高对比度opacity: 0.6, // 提高连线透明度width: 2, // 增加连线宽度},move: {enable: true,speed: 2,direction: 'none',random: true,outModes: { default: 'out' },},},interactivity: {detectsOn: 'window',events: {onHover: { enable: true, mode: 'grab' },onClick: { enable: true, mode: 'push' },resize: true,},modes: {grab: { distance: 180, links: { opacity: 0.6 } },push: { quantity: 4 },},},background: {color: {value: '#e0f7ff', // 浅蓝色背景},},
};

6、页面引用

<script lang="ts" setup>
import { particlesOptions } from '@/utils/particles';
<!-- 其他代码... -->
</script><template><!-- 粒子背景（全屏，底层） --><vue-particles id="tsparticles" :options="particlesOptions" class="particles-bg" /><!-- 其他代码... -->
</template><style scoped>
/* 粒子背景（可选，增强保险） */
.particles-bg {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1; /* 双重保险 */
}/* 登录容器：必须相对定位 + 高于粒子 */
.login-container {position: relative; /* 👈 必须有 position 才能生效 z-index */z-index: 10; /* 👈 高于粒子（-1） */display: flex;justify-content: center;align-items: center;min-height: 100vh;padding: 20px;box-sizing: border-box;
}
<!-- 其他代码... -->
</style>