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

Vue动态粒子特效插件(背景线条吸附动画)

目录

效果图:

一、安装:

二、引入 main.js 文件:

 三、使用:

 四、属性说明:


效果图:

 

 

 一、安装:

npm install vue-particles --save

二、引入 main.js 文件:

import VueParticles from 'vue-particles'  
Vue.use(VueParticles)

 三、使用:

    <vue-particlesclass="login-background"color="#409EFF":particleOpacity="0.7":particlesNumber="60"shapeType="circle":particleSize="6"linesColor="#409EFF":linesWidth="1":lineLinked="true":lineOpacity="0.4":linesDistance="150":moveSpeed="3":hoverEffect="true"hoverMode="grab":clickEffect="true"clickMode="push"></vue-particles>
.login-background {//可设置背景图 铺满屏background: linear-gradient(-180deg, #dceaf2 0%, #ffffff 100%);width: 100%;height: 100%;position: absolute;
}

 四、属性说明:

属性类型说明
colorString粒子颜色(默认:#dedede)
particleOpacityNumber粒子透明度(默认:0.7)
particlesNumberNumber粒子数量(默认:80)
shapeTypeString粒子外观类型(默认:circle,全部:circle,edge,triangle,polygon,star)
particleSizeNumber单个粒子大小(默认:80)
linesColorString线条颜色(默认:#dedede)
linesWidthNumber线条宽度(默认:1)
lineLinkedBoolean连接线是否可用(默认:true)
lineOpacityNumber线条透明度(默认:0.4)
linesDistanceNumber线条距离(默认:150)
moveSpeedNumber粒子运动速度(默认:3)
hoverEffectBoolean是否有hover特效(默认:true)
hoverModeStringhover模式类型(grab,repulse,bubble)
clickEffectBoolean是否有click特效(默认:true)
clickModeStringclick模式类型(push,remove,repulse,bubble)

 

相关文章:

Vue动态粒子特效插件(背景线条吸附动画)

目录 效果图&#xff1a; 一、安装&#xff1a; 二、引入 main.js 文件&#xff1a; 三、使用&#xff1a; 四、属性说明&#xff1a; 效果图&#xff1a; 一、安装&#xff1a; npm install vue-particles --save 二、引入 main.js 文件&#xff1a; import VueParticles…...

【Java 类】002-类、属性、方法、代码块

【Java 类】002-类、属性、方法、代码块 文章目录【Java 类】002-类、属性、方法、代码块一、类1、类与对象2、类的作用3、创建与使用类类结构创建类调用类运行结果4、Java 类的执行过程5、封装、继承、多态、抽象类、内部类、接口、枚举、记录、注解等二、属性1、概述2、类型3…...

Ubuntu Linux 编译安装的基本步骤

文章目录1 基本步骤若报错&#xff1a; No such file or directory2 解压 tar.bz2文件参考&#xff1a;1 基本步骤 解压&#xff1a; tar -zxvf file.tar.gz 进入解压后的文件夹&#xff1a; cd file 源码编译安装 ./configure # ./configmakesudo make install 若报错&…...

day59反刍笔记

1.本地环境安装vue后&#xff0c;没有vue.js文件&#xff0c;只有vue.cjs.js文件&#xff0c; 引用后也无法正常使用&#xff0c;看npm install vue后的文件夹中没有vue.js文件_找不到vue.js_一枝风的博客-CSDN博客 老哥的博客后得到启发&#xff0c;将原本的命令由&#xff1…...

【阅读笔记】你不知道的Javascript--强制类型转换4

目录强制类型转换基本概念JSONboolean强转归纳其他知识点被诟病的安全使用隐式强转法则抽象关系比较语法表达式变动强制类型转换 基本概念 类型转换发生在静态类型语言的编译阶段&#xff1b; 强制类型转换则发生在动态类型语言的运行时&#xff08;runtime&#xff09; JSON…...

华为OD机试真题Python实现【有效子字符串】真题+解题思路+代码(20222023)

有效子字符串 题目 输入两个字符串S和L,都只包含小写字母, S长度 <= 100,L长度 <= 500000, 判断S是否是L的有效子字符串, 判定规则:S中的每个字符在L中都能找到(可以不连续) 且S在L中字符的前后顺序与S中顺序要保持一致 例如: S="ace"是L="abcd…...

上门按摩预约APP源码-东郊到家源码(开发,PHP,平台搭建)

一、什么是上门按摩预约APP源码&#xff1f; 上门按摩预约APP源码是一款家政服务类型的APP&#xff0c;可以帮忙用户在家就能享受按摩的服务。APP源码分两端&#xff0c;一端是用户端&#xff0c;另外一端是技师端。采用的技术&#xff0c;前端是安卓IOS&#xff0c;后端是PHP&…...

STL讲解——模拟实现vector

STL讲解——模拟实现vector vector深度剖析 在STL源码中&#xff0c;发现vector定义的并不是 start、size、capacity&#xff0c;而是start、finish、end_of_storage. 这样就可以得到size()和capacity()。 sizefinish-start capacityend_of_storage-start 扩容可能是本地扩容也…...

各种经典排序算法介绍及实现源码

一,冒泡排序(Bubble Sort) 排序算法是程序员必须了解和熟悉的一类算法,排序算法有很多种,基础的如:冒泡、插入、选择、快速、归并、计数、基数和桶排序等。 冒泡排序只会操作相邻的两个数据。每次冒泡操作都会对相邻的两个元素进行比较,看是否满足大小关系要求,如果不…...

历史大讲堂:这是真·图形化 苹果系统历史回顾(上)

众所周知&#xff0c;米国有个非常牛掰的公司叫苹果&#xff0c;想必大家对这个logo不陌生吧。 目前已发布的苹果产品有iPhone、iPad、iPod等等&#xff0c;简直花样繁多&#xff0c;而且各种功能很好用&#xff0c;我的手机就是一部苹果iPhone X。 等一下&#xff0c;似乎扯远…...

今天女神节,用python画个贺卡送给母亲吧

今天女神节&#xff0c;你给女神妈妈准备了什么祝福呢&#xff1f;如果还没有&#xff0c;那么画个贺卡送给她吧&#xff0c;在你眼里&#xff0c;她是一个什么样的人呢&#xff1f; 是"可爱"&#xff0c;“温柔”&#xff0c;“美丽”&#xff0c;“漂亮”&#xf…...

【编程基础之Python】11、Python中的表达式

【编程基础之Python】11、Python中的表达式Python中的表达式表达式与运算符算术表达式赋值表达式比较表达式逻辑表达式位运算表达式总结Python中的表达式 在Python中&#xff0c;表达式是由操作数、运算符和函数调用等组成的语法结构&#xff0c;可以进行各种数学运算、逻辑判…...

华为OD机试真题Python实现【乱序整数序列两数之和绝对值最小】真题+解题思路+代码(20222023)

乱序整数序列两数之和绝对值最小 题目 给定一个随机的整数数组(可能存在正整数和负整数)nums, 请你在该数组中找出两个数,其和的绝对值(|nums[x]+nums[y]|)为最小值 并返回这两个数(按从小到大返回)以及绝对值。 每种输入只会对应一个答案。但是,数组中同一个元素不能使用两…...

字符串转换整数 (atoi)(python)

链接&#xff1a; https://leetcode.cn/problems/string-to-integer-atoi 题目描述&#xff1a; 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法…...

洛谷 P1115 最大子段和

题目链接&#xff1a;P1115 最大子段和 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述 给出一个长度为 n 的序列 a&#xff0c;选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数&#xff0c;表示序列的长度 n。 第二行有 n 个整数&#xff…...

【Linux】-- 权限和Shell运行原理

目录 Shell的运行原理 用户切换 su - / su sudo 权限 chmod chown chgrp 八进制方法修改文件属性 目录权限 粘滞位 umask 自定义默认权限 Shell的运行原理 广义上&#xff0c;Linux发行版 Linux内核 外壳程序 Linux 从广义上来理解它是一个操作系统 而从狭义上…...

C++各类设计模式及实现详解

软件领域中的设计模式为开发人员提供了一种使用专家设计经验的有效途径。设计模式中运用了面向对象编程语言的重要特性&#xff1a;封装、继承、多态&#xff0c;真正领悟设计模式的精髓是可能一个漫长的过程&#xff0c;需要大量实践经验的积累。最近看设计模式的书&#xff0…...

【Linux】进程理解与学习(Ⅰ)

环境&#xff1a;centos7.6&#xff0c;腾讯云服务器Linux文章都放在了专栏&#xff1a;【Linux】欢迎支持订阅&#x1f339;相关文章推荐&#xff1a;【Linux】冯.诺依曼体系结构与操作系统进程概念什么是进程&#xff1f;进程是什么&#xff1f;我们打开任务管理器可以看到有…...

认识代码之前,请先认识你自己 |《编程人生》

这是我的湛庐课程《给技术人的职场突围课》 &#xff08;链接&#xff09; 的一部分。 这篇文章也是 IT 女神征文活动 的一部分。 《编程人生》是一本优秀程序员的采访集&#xff0c;里面记录了15位世界级编程大师的故事。 我在 发刊词 里面说过&#xff0c;在这个书单课里&am…...

react学习笔记-5:react路由

react旧版本路由 旧版本的路由是按照组件的方式来写的 编写router/index.tsx文件 import App from "../App" import Home from "../views/Home" import About from "../views/About" import { BrowserRouter,Routes,Route } from "react…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...