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

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>

7、刷新页面看效果