图床项目进度(二)——动态酷炫首页

前言:

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

效果如下图。

如何使用

这个插件是particles.js

  1. 安装
npm install particles.js
  1. 在mian.js(ts)中进行导入
    在这里插入图片描述

  2. 组件中使用
    在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>
  1. 使用官网demo
    在这里插入图片描述
    在这里插入图片描述

官网是纯英文的,在里面有许多demo,上面有option的参考参数,有一说一,我不太看得懂,而且不如饿了么ui官网的一键复制来的简单,给我这语言障碍的菜狗带来了障碍。

这个面板设置完导出就是这里测试的参数,需要转换一下可以自定义使用。在这里插入图片描述
在这里插入图片描述

结语:

用起来还算很不错,尤其是对于我这新手而言。写不出来的萌新或者懒得折腾的大佬可以试试。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用图集SpriteAtlas时,根据其中的Sprite,给 RawImage 设置 texture 的两种方法

当使用图集 SpriteAtlas 时&#xff0c; 从中获取的 Sprite 的 texture 是图集中整张图片&#xff0c;为了给 RawImage 设置 Texture&#xff0c;有两种方式&#xff1a; 方式1&#xff1a;使用以下扩展函数&#xff0c;其原理是给 RawImage 设置整张纹理&#xff0c;然后设置…

C语言入门篇(九)

前言   本篇分享的是部分操作符的概念与用法&#xff0c;从经典例题入手&#xff0c;带你快速了解和掌握。   收录专栏&#xff1a;浅谈C语言 操作符详解下 10. 逗号表达式11. 下标引用、函数调用和结构成员12. 表达式求值12.1 隐士类型转换12.2 算术转换12.3 操作符的属性…

多项式求逆

已知 F F F&#xff0c;求 G G G 考虑倍增 F ( x ) ∗ H ( x ) ≡ 1 ( m o d x n / 2 ) F(x) * H(x) \equiv 1 \pmod{x^{n/2}} F(x)∗H(x)≡1(modxn/2) F ( x ) ∗ G ( x ) ≡ 1 ( m o d x n / 2 ) F(x) * G(x) \equiv 1 \pmod{x^{n/2}} F(x)∗G(x)≡1(modxn/2) 假设 H H…

最大子数组和【贪心算法】

最大子数组和 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 class Solution {public int maxSubArray(int[] nums) {//记录最大结果&…

Linux土遁术之监测监测进程打开文件

分析问题过程中&#xff0c;追踪进程打开的文件可以在许多不同情况下有用&#xff0c;体现在以下几个方面&#xff1a; 故障排除和调试&#xff1a; 当程序出现问题、崩溃或异常行为时&#xff0c;追踪进程打开的文件可以帮助您找出问题的根本原因。这有助于快速定位错误&…

基于Spring Boot的住院病人管理系统设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的住院病人管理系统设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java spring…

前列腺小体外泄蛋白(PSEP)——博迈伦

前列腺小体外泄蛋白&#xff08;Prostate-specific extracellular vesicle protein&#xff0c;简称PSEP&#xff09;是一种在前列腺细胞分泌的小体外囊泡中出现的蛋白质。小体外泌物指的是由细胞分泌的膜包裹小体&#xff0c;其中包含多种生物活性物质&#xff0c;如蛋白质、R…

springboot aop实现接口防重复操作

一、前言 有时在项目开发中某些接口逻辑比较复杂&#xff0c;响应时间长&#xff0c;那么可能导致重复提交问题。 二、如何解决 1.先定义一个防重复提交的注解。 import java.lang.annotation.*;Inherited Target(ElementType.METHOD) Retention(RetentionPolicy.RUNTIME) Do…

vue三级市区联动

默认返回值格式&#xff1a;all:code、name都返回 name:只返回name code:只返回code&#xff0c;level&#xff1a;可设置显示层级 1&#xff1a; 省 2&#xff1a; 省、市 3&#xff1a; 省、市、区 v-model 默认值 可以是 name: [ "天津市", "天津市",…

Debian 30 周年,生日快乐!

导读近日是 Debian 日&#xff0c;也是由伊恩-默多克&#xff08;Ian Murdock&#xff09;创立的 Debian GNU/Linux 通用操作系统和社区支持的 Debian 项目 30 周年纪念日。 不管你信不信&#xff0c;从已故的伊恩-默多克于 1993 年 8 月 16 日宣布成立 Debian 项目&#xff0c…

C# 练习题

26. Enum(枚举) /*枚举是一组命名整型常量。枚举类型是使用 enum 关键字声明的。C# 枚举是值类型。换句话说&#xff0c;枚举包含自己的值&#xff0c;且不能继承或传递继承。 */using System;public class EnumTest {enum Day { Sun, Mon, Tue, Wed, Thu, Fri, Sat };static…

CentOS 7 Nacos 设置开机自动重启

一、说明 Nacos如果是手动启动的话&#xff0c;在服务器宕机或者重启后&#xff0c;没有自动运行&#xff0c;影响很多业务系统&#xff0c;需要每次手动执行命令 startup.sh -m standalone&#xff0c;才能启动 Nacos 服务&#xff0c;不能像docker服务一样&#xff0c;使用 …

博客系统后端(项目系列2)

目录 前言 &#xff1a; 1.准备工作 1.1创建项目 1.2引入依赖 1.3创建必要的目录 2.数据库设计 2.1博客数据 2.2用户数据 3.封装数据库 3.1封装数据库的连接操作 3.2创建两个表对应的实体类 3.3封装一些必要的增删改查操作 4.前后端交互逻辑的实现 4.1博客列表页 …

【ES】elasticsearch8.3.3

这里仅实践操作并根据实际问题进行记录笔记。 运行 ES8 我们需要在自己的电脑上安装好 Docker Desktop。接着我们运行如下的命令&#xff1a;出现两个异常&#xff0c;一个是需要使用winpty因为我使用win的docker desktop&#xff0c;另外一个问题是docker启动elasticsearchE…

跨屏无界 | ZlongGames 携手 Google Play Games 打造无缝游戏体验

一款经典游戏&#xff0c;会在时间的沉淀中被每一代玩家所怀念&#xff0c;经久不衰。对于紫龙游戏来讲&#xff0c;他们就是这样一群怀揣着创作出经典游戏的初心而聚集在一起的团队&#xff0c;致力于研发出被广大玩家喜爱的作品。 从 2015 年团队成立&#xff0c;到 2019 年走…

Ansible-palybook学习

目录 一.playbook介绍二.playbook格式1.书写格式2.notify介绍 一.playbook介绍 playbook 是 ansible 用于配置&#xff0c;部署&#xff0c;和管理被控节点的剧本。通过 playbook 的详细描述&#xff0c;执行其中的一系列 tasks &#xff0c;可以让远端主机达到预期的状态。pl…

一点思考|漫谈 AI 中的「反馈」机制

前言&#xff1a;生物世界中的正负反馈机制能够促进生物进化&#xff0c;为生物圈的良好生态提供保障。本文探究反馈机制在深度神经网络中的体现&#xff0c;由于笔者知识浅薄&#xff0c;故仅列举个人认知范围内的以下几种「反馈」示例。&#xff08;本文初稿诞生于2022年12月…

Krahets 笔面试精选 88 题——40. 组合总和 II

使用深度搜索的方法&#xff1a; 由于题目说候选数组中的每个数字在每个组合只能出现一次&#xff0c;所以&#xff0c;为了避免重复&#xff0c;在开始之前对候选数组进行升序排序&#xff0c;这样优先选择小的数&#xff0c;如果当前的数都小于目标值&#xff0c;则后面的数就…

find ./* -type d -empty -exec touch {}/.gitkeep \;

这是一个 Linux 下的 find 命令&#xff0c;用于在所有空目录中创建 .gitkeep 文件。让我们来分解一下这个命令做了什么&#xff1a;- find ./* &#xff1a; 在当前目录及其子目录中查找。 -type d &#xff1a; 只查找目录类型的文件。 -empty &#xff1a; 只找出那些空的目…

C# 中操作集合的方法

Add&#xff1a;向集合中添加元素。 List<int> numbers new List<int>(){ 1, 2, 3 }; numbers.Add(4); // numbers 现在为 { 1, 2, 3, 4 }Remove&#xff1a;从集合中移除指定的元素。 List<int> numbers new List<int>(){ 1, 2, 3, 4 }; numbers.Re…