私募基金大屏粒子效果和动画闪烁效果 vue3+js

 粒子效果

安装

npm install vue3-particles
npm install tsparticles-slim

在main.js导入

import Particles from "vue3-particles";

import { createApp } from "vue";
import App from "./App.vue";
createApp(App).use(Particles)

 使用

<template><div class="bigBox"><div class="top"><headVue></headVue></div><div class="center"><vue-particlesid="tsparticles":particlesInit="particlesInit":particlesLoaded="particlesLoaded":options="data.options"/></div><!-- <div class="flooter"></div> --></div>
</template><script setup>
import { onMounted, reactive } from "vue";
import headVue from "./views/largeScreen/components/head.vue";// import { loadFull } from "tsparticles";
import { loadSlim } from "tsparticles-slim";
const data = reactive({options: {background: {color: {// value: "#000000",},},fpsLimit: 100,interactivity: {events: {onClick: {enable: false,},onHover: {enable: false,},resize: true,},},particles: {color: {value: "#ffffff",},links: {enable: false, // 禁用链接效果},collisions: {enable: true,},move: {direction: "bottom",enable: true,outMode: "out",random: false,speed: 1,straight: false,outModes: {default: "out",},},number: {density: {enable: true,value_area: 800,},value: 80, // 增加数量},opacity: {value: 0.5,random: true,},shape: {type: "circle",},size: {value: { min: 1, max: 3 },},},detectRetina: true,},
});// 粒子效果
const particlesInit = async (engine) => {await loadSlim(engine);
};
const particlesLoaded = async (container) => {// console.log("Particles container loaded", container)
};
</script><style lang="scss" scoped>
.bigBox {.top {position: absolute;top: 0px;width: 1920px;height: 80px;background: url("@/assets/images/top.png") no-repeat;background-size: 100%;z-index: 999;}.center {background: url("@/assets/images/bbgg.png");background-size: 100% 100%;position: absolute;top: 0px;width: 100%;height: 100%;// position: fixed;// top: 0;// left: 0;// width: 100vw;// height: 100vh;// z-index: -1; /* 保证粒子背景在最底层 */}.flooter {position: absolute;bottom: 0px;width: 1920px;height: 40px;// background: url("@/assets/images/Frame103(53).png");background-size: 100% 100%;z-index: 999;}// #particles-js {//   position: fixed;//   top: 0;//   left: 0;//   width: 100vw;//   height: 100vh;//   z-index: -1; /* 保证粒子背景在最底层 *///   background-color: #282c34; /* 可设置背景色 */// }
}
</style>

之前有报什么没定义是插件的问题 将tsparticles换成tsparticles-slim这个就行了

闪烁动画

.num {font-size: 48px;font-weight: 700;text-shadow: 0px 0px 8px #2dc5c3, 0px 0px 8px #2dc5c3;animation: flash 1s ease-in-out infinite;//flash动画的名字animation-delay: 3s; /* 每2秒开始一次动画 */}@keyframes flash {0%,100% {opacity: 1;}50% {opacity: 0.5;}
}