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

vue3使用粒子特效

安装

//使用npm安装
npm install particles.vue3 --save//使用yarn安装
yarn add particles.vue3 --save//必须得装
npm i tsparticles

使用

main.js

import Particles from 'particles.vue3'
const app = createApp(App)
app.use(Particles)//使用粒子特效

页面使用

<script setup>
import config from "@/views/login/config.js"
import { ref, reactive, toRefs, onMounted } from "vue";import { loadFull } from "tsparticles"
console.log(config,'particles');
const options = reactive(config.particles);
const particlesInit = async (engine) => {await loadFull(engine)
}const particlesLoaded = async (container) => {console.log('粒子效果加载完成时触发', container)
}
</script>
<template><div class="container-page"><Particlesid="tsparticles":particlesInit="particlesInit":particlesLoaded="particlesLoaded":options="options"/></div>
</template>
<style scoped >
.container-page {background-image: url("");background-repeat: no-repeat;background-size: cover;height: 100vh;width: 100vw;position: relative;
}
</style>

配置

export default {particles:{background: {color: {// value: '#2d3a4b' // 粒子颜色,如果有图片背景记得注释掉不然会覆盖背景}},fpsLimit: 60,interactivity: {events: {onClick: {enable: true,mode: 'push' // 可用的click模式有: "push", "remove", "repulse", "bubble"。},onHover: {enable: true,mode: 'grab' // 可用的hover模式有: "grab", "repulse", "bubble"。},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', // '#dedede'。线条颜色。distance: 150, // 线条长度enable: true, // 是否有线条opacity: 0.5, // 线条透明度。width: 1 // 线条宽度。},collisions: {enable: false},move: {direction: 'none',enable: true,outMode: 'bounce',random: false,speed: 1, // 粒子运动速度。straight: false},number: {density: {enable: true,area: 800},value: 80 // 粒子数量。},opacity: {value: 0.5 // 粒子透明度。},shape: {type: 'star' // 可用的粒子外观类型有:"circle","edge","triangle", "polygon","star"},size: {random: true,value: 5}},detectRetina: true}
}

相关文章:

vue3使用粒子特效

安装 //使用npm安装 npm install particles.vue3 --save//使用yarn安装 yarn add particles.vue3 --save//必须得装 npm i tsparticles 使用 main.js import Particles from particles.vue3 const app createApp(App) app.use(Particles)//使用粒子特效 页面使用 <sc…...

DMDEM部署说明-详细步骤-(DM8达梦数据库)

DMDEM部署说明-详细步骤-DM8达梦数据库 环境介绍1 部署DM8 数据库1.1 创建一个数据库作为DEM后台数据库1.2 创建数据库用户 DEM1.3 使用DEM用户导入dem_init.sql 2 配置tomcat2.1 配置/tomcat/conf/server.xml2.2 修改jvm启动参数 3 配置JAVA 1.8及以上版本的运行时环境3.1 配置…...

aws亚马逊:什么是 Amazon EC2?

Amazon Elastic Compute Cloud&#xff08;Amazon EC2&#xff09;在 Amazon Web Services&#xff08;AWS&#xff09;云中按需提供可扩展的计算容量。使用 Amazon EC2 可以降低硬件成本&#xff0c;因此您可以更快地开发和部署应用程序。您可以使用 Amazon EC2 启动所需数量的…...

【BMC】jsnbd介绍

jsnbd介绍 本文主要介绍一个名为jsnbd的开源项目&#xff0c;位于GitHub - openbmc/jsnbd&#xff0c;它实现了一个前端&#xff08;包含HTML和JS文件&#xff09;页面&#xff0c;作为存储服务器&#xff0c;可以指定存储内容&#xff1b;还包含一个后端的代理&#xff0c;这…...

个推「数据驱动运营增长」上海专场:携程智行火车票分享OTA行业的智能用户运营实践

近日&#xff0c;以“数据增能&#xff0c;高效提升用户运营价值”为主题的个推「数据驱动运营增长」城市巡回沙龙上海专场圆满举行。携程智行火车票用户运营负责人王银笛分享OTA行业的智能用户运营实践。 ▲ 王银笛 携程智行火车票用户运营负责人 负责智行业务线用户运营。从0…...

Linux--gcc/g++

一、gcc/g是什么 gcc的全称是GNU Compiler Collection&#xff0c;它是一个能够编译多种语言的编译器。最开始gcc是作为C语言的编译器&#xff08;GNU C Compiler&#xff09;&#xff0c;现在除了c语言&#xff0c;还支持C、java、Pascal等语言。gcc支持多种硬件平台 二、gc…...

MySQL5.7源码编译安装

查看是否安装过mysql软件包 rpm -qa|grep mysql rpm -qa|grep mariadb rpm -e --nodeps mysql的软件包名建立mysql账号 useradd -s /sbin/nologin -M mysql安装依赖包 yum install -y gcc yum install -y gcc-c yum install -y ncurses yum install -y bison yum install -y…...

uniapp使用v-for页面不刷新解决办法

项目场景&#xff1a; 做一个项目&#xff0c;v-for循环数据库数据&#xff0c;使用uni-load-more&#xff0c;结果发现... DOM中的列表却没有更新 解决方案&#xff1a; 根据网上教程&#xff0c;加了一个触底函数onReachBottom&#xff0c;结果发现无论如何也更新不了DOM中…...

发布一款将APM日志转换为Excel的开源工具

这几年有不少朋友向我咨询如何将APM日志转换为Excel&#xff0c;我之前的答复是先将日志转换为MATLAB的格式&#xff0c;然后用MATLAB导出为Excel。但是实际上不是每个人都会用MATLAB&#xff0c;并且处理数据也不是非要用MATLAB&#xff0c;更不是说用MATLAB了就显得专业、显得…...

本地化小程序运营 同城小程序开发

时空的限制让本地化的线上平台成为一种追求&#xff0c;58及某团正式深挖人们城镇化、本地化的信息和商业需求而崛起的平台&#xff0c;将二者结合成本地化小程序&#xff0c;显然有着巨大的市场机会。本地化小程序运营可以结合本地化生活需求的一些信息&#xff0c;以及激发商…...

关于electron打包卡在winCodeSign下载问题

简单粗暴&#xff0c;直接上解决方案&#xff1a; 在你的项目根目录下创建一个.npmrc的文件&#xff0c;且在里面加上以下文本&#xff0c;不用在意这个镜像源是不是最新的&#xff0c;它会自己重定向到nodemirror这个域名里下载 ELECTRON_MIRRORhttps://npm.taobao.org/mirror…...

01_ddim_inversion_CN

DDIM反转 设置 # !pip install -q transformers diffusers accelerateimport torch import requests import torch.nn as nn import torch.nn.functional as F from PIL import Image from io import BytesIO from tqdm.auto import tqdm from matplotlib import pyplot as p…...

ElasticSearch的文档、字段、映射和高级查询

1. 文档&#xff08;Document&#xff09; 在ES中一个文档是一个可被索引的基础信息单元&#xff0c;也就是一条数据 比如&#xff1a;你可以拥有某一个客户的文档&#xff0c;某一个产品的一个文档&#xff0c;当然&#xff0c;也可以拥有某个订单的一个文档。文档以JSON&…...

vim相关命令讲解!

本文旨在讲解vim 以及其相关的操作&#xff01; 希望读完本文&#xff0c;读者会有一定的收获&#xff01;好的&#xff0c;干货马上就来&#xff01; 初识vim 在讲解vim之前&#xff0c;我们首先要了解vim是什么&#xff0c;有什么作用&#xff1f;只有了解了vim才能更好的理…...

22.构造一个关于员工信息的结构体数组,存储十个员工的信息

结构体问题。构造一个关于员工信息的结构体数组&#xff0c;存储十个员工的信息&#xff0c;包括员工工号&#xff0c;员工工资&#xff0c;员工所得税&#xff0c;员工实发工资。要求工号和工资由键盘输入&#xff0c;并计算出员工所得税&#xff08;所得税工资*0.2&#xff0…...

北京刘家窑中医院举行‘心梗救治日’宣传活动,郭自强主任呼吁提高群众防治意识

...

calico

calico:默认是ip-ip模式&#xff0c; ipip 开销小 vxlan模式&#xff1a;后期版本才支持 不会创建虚拟交换机 Calico 是一种用于构建和管理容器网络的开源软件定义网络&#xff08;SDN&#xff09;解决方案。它专门设计用于在容器和虚拟机之间提供高性能、高可扩展性和灵活的…...

web前端开发第3次Dreamweave课堂练习/html练习代码《网页设计语言基础练习案例》

目标图片&#xff1a; 文字素材&#xff1a; 网页设计语言基础练习案例 ——几个从语义上和文字相关的标签 * h标签&#xff08;h1~h6&#xff09;&#xff1a;用来定义网页的标题&#xff0c;成对出现。 * p标签&#xff1a;用来设置网页的段落&#xff0c;成对出现。 * b…...

APP备案获取安卓app证书公钥获取方法和签名MD5值

前言 在开发和发布安卓应用程序时&#xff0c;了解应用程序证书的公钥和签名MD5值是很重要的。这些信息对于应用程序的安全性和合规性至关重要。现在又因为今年开始APP必须接入备案才能在国内各大应用市场上架&#xff0c;所以获取这两个值成了所有开发者的必经之路。本文将介…...

cefsharp 93.1.140 如何在js中暴露c#类

从cefsharp79版本开始&#xff0c;旧的RegisterJsObject方法被删除了。 也就是说想使用79以后的版本&#xff0c;就必须更新js暴露c#对象的方法了。由于79之前的注册方法是不需要在js中进行注册的&#xff0c;在93版本上如何在不改动前端页面的基础上实现内核升级咧&#xff0c…...

OpenClaw高阶玩法:Qwen3-4B模型微调适配专属自动化流程

OpenClaw高阶玩法&#xff1a;Qwen3-4B模型微调适配专属自动化流程 1. 为什么需要定制化模型&#xff1f; 去年夏天&#xff0c;我尝试用OpenClaw自动化处理一批专业文献时遇到了瓶颈。当AI试图理解"CRISPR-Cas9基因编辑技术"这类术语时&#xff0c;标准模型要么要…...

OpenClaw小龙虾技能包大全|最新整理版:100+必装技能、安装命令与用法-周红伟

本文整理了 OpenClaw 技能大全&#xff0c;涵盖安全、办公、开发、创作、生活等 100 技能&#xff0c;小白一键安装。包含 OpenClaw 小龙虾安装教程、本地部署、技能命令、避坑指南&#xff0c;让你的 AI Agent 从聊天机器人变 24 小时自动干活的数字员工&#xff01;最近全网…...

从“摸黑探索”到“撞开大门”,OpenClaw引爆的产业技术路线演变-周红伟

3月的最后一周&#xff0c;OpenClaw的GitHub Issues区格外热闹——只是这一次&#xff0c;报错的不是开发者&#xff0c;而是安全研究员。 蚂蚁AI安全实验室、天融信(7.150, -0.14, -1.92%)、360在一周内密集披露了数十个安全漏洞&#xff0c;涉及远程接管、信息泄露等高风险问…...

深入解析CryptoJS:AES加密与解密在前端安全传输中的实战应用

1. 为什么前端需要加密传输&#xff1f; 想象一下这样的场景&#xff1a;用户在登录页面输入账号密码&#xff0c;点击提交按钮后&#xff0c;这些敏感信息会以明文形式在网络中传输。如果被中间人截获&#xff0c;后果不堪设想。这就是为什么我们需要在前端对敏感数据进行加密…...

OpenClaw本地调试避坑:Qwen3-32B私有镜像接口配置全流程

OpenClaw本地调试避坑&#xff1a;Qwen3-32B私有镜像接口配置全流程 1. 为什么需要本地模型对接&#xff1f; 上周我在尝试用OpenClaw自动处理一批技术文档时&#xff0c;发现公有云API的响应速度严重影响了任务效率。更关键的是&#xff0c;部分涉及内部代码的文档内容不适合…...

避坑指南:ERA5数据GRIB转Hysplit/MeteInfo格式,这些细节错了白算一周

ERA5气象数据格式转换实战&#xff1a;从GRIB到Hysplit/MeteInfo的高效避坑手册 当你在深夜盯着屏幕前运行了72小时的后向轨迹计算突然报错终止&#xff0c;或是发现转换后的数据维度与模型要求完全不匹配时&#xff0c;那种绝望感每个气象科研人员都深有体会。本文源自三个实验…...

RTOS在嵌入式开发中的核心价值与实战应用

1. RTOS在嵌入式开发中的核心价值我第一次接触RTOS是在2015年开发工业控制器时遇到的困境。当时用裸机编程实现多任务调度&#xff0c;代码已经膨胀到难以维护的程度。一个简单的功能修改需要通读上万行代码&#xff0c;调试一个BUG经常引发连锁反应。直到引入RTOS后&#xff0…...

ATmega328P ADC底层控制库:精度、功耗与实时性深度优化

1. 项目概述AnalogControlPanel&#xff08;ACP&#xff09;是一个专为ATmega328P系列Arduino平台&#xff08;Uno、Nano、Pro Mini&#xff09;设计的底层ADC控制库。它并非替代analogRead()的简易封装&#xff0c;而是一套面向嵌入式工程师的、对AVR片上模数转换器&#xff0…...

LLMLingua未来展望:AI推理加速技术的终极发展趋势

LLMLingua未来展望&#xff1a;AI推理加速技术的终极发展趋势 【免费下载链接】LLMLingua [EMNLP23, ACL24] To speed up LLMs inference and enhance LLMs perceive of key information, compress the prompt and KV-Cache, which achieves up to 20x compression with minima…...

终极指南:如何使用HunterPie游戏界面增强工具提升《怪物猎人:世界》体验

终极指南&#xff1a;如何使用HunterPie游戏界面增强工具提升《怪物猎人&#xff1a;世界》体验 【免费下载链接】HunterPie-legacy A complete, modern and clean overlay with Discord Rich Presence integration for Monster Hunter: World. 项目地址: https://gitcode.co…...