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

图床项目进度（二）——动态酷炫首页

news 2025/7/7 5:34:31

前言：

前面的文章我不是说我简单copy了站友的一个登录页吗，我感觉还是太单调了，想加一个好看的背景。
但是我前端的水平哪里够啊，于是在网上找了找制作动态背景的插件。
在这里插入图片描述

效果如下图。

如何使用

这个插件是particles.js

安装

npm install particles.js

在mian.js(ts)中进行导入
组件中使用
在vue模板中直接使用组件就可以。（里面贼长的option参数，应该也可以写到js里，我照搬官网的）

<vue-particlesid="tsparticles":particlesInit="particlesInit":particlesLoaded="particlesLoaded":options="{background: {color: {value: '#080808'}},fpsLimit: 120,interactivity: {events: {onClick: {enable: true,mode: 'push'},onHover: {enable: true,mode: 'repulse'},resize: true},modes: {bubble: {distance: 400,duration: 2,opacity: 0.8,size: 40},push: {quantity: 4},repulse: {distance: 200,duration: 0.4}}},particles: {color: {value: '#ffffff'},links: {color: '#ffffff',distance: 150,enable: true,opacity: 0.5,width: 1},collisions: {enable: true},move: {direction: 'none',enable: true,outMode: 'bounce',random: false,speed: 6,straight: false},number: {density: {enable: true,area: 800},value: 80},opacity: {value: 0.5},shape: {type: 'circle'},size: {random: true,value: 5}},detectRetina: true}"/>

下面是js（ts）部分。

<script lang="ts" setup>
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.const particlesInit = async engine => {//await loadFull(engine);await loadSlim(engine);
};const particlesLoaded = async container => {console.log("Particles container loaded", container);
};
</script>