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

Vue3实战笔记(38)—粒子特效终章

文章目录

  • 前言
  • 一、怎样使用官方提供的特效
  • 二、海葵特效
  • 总结


前言

官方还有很多漂亮的特效,但是vue3只有一个demo,例如我前面实现的两个页面就耗费了一些时间,今天记录一下tsparticles官方内置的几个特效的使用方法,一般这几个就足够用了。


一、怎样使用官方提供的特效

例如想使用preset-stars,先安装

pnpm i @tsparticles/preset-stars

新建页面preset-star.vue


<template><div><vue-particles id="tsparticles"  :options="particlesOptions" /></div>
</template><script setup lang="ts" name="">const particlesOptions = {particles: {shape: {type: "star", // starting from v2, this require the square shape script},},preset: "stars",}
</script><style lang='scss' scoped>
</style>

main.ts中:


import { loadStarsPreset } from "@tsparticles/preset-stars";//使用Particles
app.use(Particles, {init: async engine => {await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need itawait loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animationsawait loadStarsPreset(engine); },})

看看,简简单单就来效果了:
在这里插入图片描述

二、海葵特效

pnpm i @tsparticles/preset-sea-anemone

tsParticles.load({id: "tsparticles",options: {particles: {shape: {type: "square", // starting from v2, this require the square shape script},},preset: "seaAnemone",},
});

在这里插入图片描述
就举这两个例子介绍一下使用方法吧,想要其他特效可以去官网翻翻,还有说明一点这些都是动画特效,运行起来比我截图漂亮多了。


总结

世间万物皆为我所用,非我所属。

相关文章:

Vue3实战笔记(38)—粒子特效终章

文章目录 前言一、怎样使用官方提供的特效二、海葵特效总结 前言 官方还有很多漂亮的特效&#xff0c;但是vue3只有一个demo&#xff0c;例如我前面实现的两个页面就耗费了一些时间&#xff0c;今天记录一下tsparticles官方内置的几个特效的使用方法&#xff0c;一般这几个就足…...

晶体振荡器

一、晶振与晶体区别 晶振是有源晶振的简称&#xff0c;又叫振荡器&#xff0c;英文名称是oscillator&#xff0c;内部有时钟电路&#xff0c;只需供电便可产生振荡信号&#xff1b;晶体是无源晶振的简称&#xff0c;也叫谐振器&#xff0c;英文名称是crystal&#xff0c;是无极…...

单词可交互的弧形文本

在一个项目中&#xff0c;要求把少儿读本做成电子教材呈现出来&#xff0c;电子书的排版要求跟纸质书一致。其中&#xff0c;英语书有个需求&#xff1a;书中有些不规则排版的文本&#xff08;如下图所示&#xff09;&#xff0c;当随书音频播放时&#xff0c;被读到的文本要求…...

Linux——进程信号(一)

1.信号入门 1.1生活中的信号 什么是信号? 结合实际红绿灯、闹钟、游戏中的"&#xff01;"等等这些都是信号。 以红绿灯为例子&#xff1a; 一看到红绿灯我们就知道&#xff1a;红灯停、绿灯行&#xff1b;我们不仅知道它是一个红绿灯而且知道当其出现不同的状况…...

centos9 stream在线安装NVIDIA驱动(rockylinux9.4也成功安装nvidia驱动)

Install NVIDIA Drivers on CentOS Stream 9&#xff08;rockylinux9.4成功&#xff09; 主板为技嘉mz72-hb2 显卡为4090 一.Disable Secure Boot From the BIOS 二.Enabling the EPEL Repository on CentOS Stream 9 1.update the DNF package repository cache sudo dnf …...

springmvc不同格式的参数解析

参数解析 application/x-www-form-urlencoded格式 这种格式就是传统的表单提交格式&#xff0c;就是一个个的键值对&#xff0c;会进行url编码&#xff0c;使用springmvc接收时使用RequestParam来进行接收&#xff0c;与传入的字段一一对应&#xff0c;此时使用的参数处理器是R…...

Unity3D让BoxCollider根据子物体生成自适应大小

系列文章目录 unity工具 文章目录 系列文章目录unity工具 &#x1f449;前言&#x1f449;一、编辑器添加&#x1f449;二、代码动态添加的方法(第一种)&#x1f449;三、代码动态添加的方法(第二种)&#x1f449;四、重新设置模型的中心点&#x1f449;壁纸分享&#x1f449;…...

WSL 2 installation is incomplete.

使用的wsl2版本很旧&#xff0c;因此需要手动更新。 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi...

Servlet的request对象

request对象的继承关系 1.HttpServletRequest接口继承了ServletRequest接口&#xff0c;对其父接口进行了扩展&#xff0c;可以处理满足所有http协议的请求 2.HttpServletRequest和ServletRequest都是接口&#xff0c;不能创建对象&#xff0c;因此在tomcat底层定义实现类并创…...

蓝桥杯-合并数列

小明发现有很多方案可以把一个很大的正整数拆成若干正整数的和。他采取了其中两种方案&#xff0c;分别将它们列为两个数组 {a1, a2, …, an} 和 {b1, b2, …, bm}。两个数组的和相同。 定义一次合并操作可以将某数组内相邻的两个数合并为一个新数&#xff0c;新数的值是原来两…...

《web应用技术》第9次课后作业

一、将前面的代码继续完善功能 1、采用XML映射文件的形式来映射sql语句&#xff1b; 2、采用动态sql语句的方式&#xff0c;实现条件查询的分页。 二、学习git的使用。 1、每个小组将自己的项目上传到gitee&#xff0c;学会协作开发&#xff1b; 2、学会从gitee上拉取项目…...

FRAUDARCatchSync算法简介

参考&#xff1a;https://blog.51cto.com/u_15127663/2778705 1. 背景 Fraudar 要解决的问题是&#xff1a;找出社交网络中最善于伪装的虚假用户簇。虚假用户会通过增加和正常用户的联系来进行伪装&#xff0c;而这些伪装(边)会形成一个很密集的子网络&#xff0c;可以通过定义…...

刷题之将有序数组转换成二叉搜索树(leetcode)

将有序数组转换成二叉搜索树 正常递归&#xff0c;中序遍历 递归经常会把自己绕晕&#xff0c;还是得画图分析 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(null…...

K-means聚类模型教程(个人总结版)

K-means聚类是一种广泛应用于数据挖掘和数据分析的无监督学习算法。它通过将数据点分成K个簇&#xff08;cluster&#xff09;&#xff0c;使得同一簇内的数据点之间的相似度最大&#xff0c;不同簇之间的相似度最小。本文将详细介绍K-means聚类算法的背景、基本原理、具体实现…...

android怎么告诉系统不要回收

在Android中&#xff0c;如果你想告诉系统不要回收你的应用程序&#xff0c;可以通过设置Activity的属性来实现。你可以设置android:configChanges属性&#xff0c;指定在哪些配置更改时不重新创建Activity。 例如&#xff0c;如果你想指示系统在屏幕方向更改时不要重新创建Ac…...

【FAQ】HarmonyOS SDK 闭源开放能力 —IAP Kit(2)

1.问题描述&#xff1a; 应用内支付IAP Kit和Payment Kit的区别以及适用场景&#xff1f; 解决方案&#xff1a; IAP Kit是四方支付&#xff0c;仅支持在线虚拟商品&#xff0c;如会员&#xff0c;游戏钻石等&#xff0c;双框架支持全球&#xff0c;目前单框架暂时只支持国内…...

ubuntu设置root开机登录,允许root用户ssh远程登录

ubuntu与centos系统不同&#xff0c;默认root开机不能登录。 1、输入一下命令创建root密码&#xff0c;根据提示输入新密码 sudo passwd root 2、打开gdm-autologin文件&#xff0c;将auth required pam_succeed_if.so user ! root quiet_success这行注释掉&#xff0c;这行就…...

Web测试面试题(二)

一&#xff1a;简述HTTP协议的状态码包含哪些&#xff1f; 2XX&#xff0c;表示成功 3XX&#xff0c;表示重定向 4XX&#xff0c;表示客户端错误 5XX&#xff0c;表示服务器错误 二&#xff1a;HTTP和HTTPS的区别&#xff1f; 《1》安全性上的区别&#xff1a; HTTPS&#x…...

VBA宏指令写的方法突然不能用了

背景:项目组有个自动化测试项目,实在excel中利用VBA开发的;时间比较久远,我前面的哥们走后,这个软件一直在用,最近系统不知道是不是更新的缘故;有些代码除了问题; 先上源码: Dim Conn As Object, Rst As Object Dim sqlStr$ Dim str_start_SN$, str2$ str_start_SN …...

第13章 Python建模库介绍

以下内容参考自https://github.com/iamseancheney/python_for_data_analysis_2nd_chinese_version/blob/master/%E7%AC%AC05%E7%AB%A0%20pandas%E5%85%A5%E9%97%A8.md 《利用Python进行数据分析第2版》 用以学习和记录。 本书中&#xff0c;我已经介绍了Python数据分析的编程基…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...