vue引入粒子特性插件

置顶 已于 2023-12-12 13:32:35 修改
阅读量404 收藏 1
点赞数
文章标签： vue
于 2020-11-07 13:03:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40942490/article/details/109545622
版权

一起探讨学习

欢迎大家进群，一起讨论学习

每天给大家提供技术干货

在这里插入图片描述

博主技术笔记 https://notes.xiyankt.com


博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star https://gitee.com/bright-boy/xiyan-blog


npm install vue-particles

main.js引入

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

App.vue

<vue-particles
      color="#00FFFF"
      :particleOpacity="1"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="5"
      linesColor="#00FF00"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="1"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>

```效果

在这里插入图片描述

刘明同学呀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
11-21
为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果。 解决问题： 以背景方式显示 无法获取按钮焦点，触发不了点击事件 实现过程 安装vue-particles npm install vue-particles --save-dev 全局配置vue-particles 在main.js里面： import VueParticles from 'vue-particles' Vue.use(VueParticles) 使用 vue-particles 在vue文件template
vue-particles:vue的粒子特效
05-13
vue-particle vue-particles可以生成类似于星座图的点和线，并且能与用户的鼠标事件产生互动。 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report For detailed explanation on how things work, checkout the and . 使用教程 ： npm install vue-particles --save
vue工程：使用vue-particles实现动态粒子效果且只作为背景显示（包括样式设置）(1)
最新发布
2401_84447417的博客
05-16 397
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
Vue项目中使用vue-particles（粒子背景）插件
热门推荐
小傲哥哥的博客
07-02 2万+
vue-particles 是什么？ 它是一个粒子背景插件。 github地址：https://github.com/creotip/vue-particles 使用方法： 1、安装插件 npm install vue-particles --save-dev 2、在main.js文件中全局引入 import Vue from 'vue' import VueParticles from 'vue-particles' Vue.use(VueParticles) 3、在需要使用粒子背景的组件中使用(一般
vue中使用动画vue-particles
Chandler1986的博客
10-30 660
1.下载依赖 npm install vue-particles --save-dev 2.main.js引入 import Vue from 'vue' import VueParticles from 'vue-particles' Vue.use(VueParticles) 3.直接使用 <vue-particles col...
Vue——vue-particles粒子背景
weixin_45865992的博客
11-08 803
vue-particles 是什么？它是一个粒子背景插件。1.安装插件2.在main.js文件中全局引入3.在需要使用粒子背景的组件中使用(一般是首页或者登陆背景中使用)
粒子动态背景--在Vue3中使用VueParticles
Kylin的博客
12-08 9281
前言 在公司某项目登录界面见到粒子动画背景，也想将这个动画效果用在自己的项目上，起初以为直接安装vue-particles就可以了，结果自己的项目是Vue3的，不兼容。根据网上调研，在Vue3中可以使用particles.vue3实现这个粒子动画 particles.vue3官网 https://particles.js.org/ Demos 就是一个演示，在里面可以自己更改一些配置 Presets 就是预设的动画，点进去可以看到效果 API Docs 文档 CodePen 代
threejs虚幻粒子波纹动画特效.zip
01-15
3. **应用到项目**：将这个特效整合到自己的Vue项目中，需要将相关代码复制到Vue组件中，并确保所有依赖正确引入。根据项目的实际需求，可能还需要进行一些适配和优化工作。 总之，"threejs虚幻粒子波纹动画特效....
粒子波纹流动canvas特效
04-25
"JS常用代码"和"其它代码"标签暗示这可能是一个通用的JavaScript库或插件，可以复用在不同的项目中。 "jiaoben7074"可能是代码示例的名称，可能包含实现这个特效的JavaScript文件或相关资源。"说明.htm"文件可能是...
三十八款HTML动态壁纸壁纸源码.zip
09-03
8. **框架和库**：一些复杂的动态壁纸可能使用了前端框架（如React或Vue.js）或库（如GreenSock Animation Platform - GSAP）来简化开发过程，提供更高级别的动画控制和组件管理。 通过研究这个压缩包中的源码，...
Canvas宇宙黑洞动画特效特效代码
03-20
WebGL是一种基于OpenGL标准的JavaScript API，能够在任何兼容的Web浏览器中直接渲染3D图形，无需插件。 接下来，我们探讨如何实现宇宙黑洞动画特效。黑洞是一种天体物理学概念，具有极强的引力，以至于光线也无法...
前端开源库-pixi
08-29
作为开源库，Pixi拥有活跃的开发者社区，不断推出新的插件和扩展，如粒子系统、物理引擎、图层管理等，丰富了Pixi的功能。开发者可以基于这些组件快速构建自己的游戏或交互式应用。 5. **易于集成**： Pixi.js...
干货：Vue粒子特效（vue-particles插件，2024我是如何拿到小米、京东、字节的offer
2301_78399639的博客
04-02 763
image.png图上那些类似于星座图的点和线，是由vue-particles生成的，不仅自己动，而且能与用户鼠标事件产生互动。一直中意这种动态插件，今天有时间，迫不及待试了一波~大写的NICE~========
particles.js在vue中的实战用法
weixin_44251396的博客
01-06 2045
先看一下效果吧，以便有充分的兴趣读下去！ 用法： 1. 先下载 npm install --save particles.js 2.引入 如果多个文件要用的话，可以用如下引入，单文件则只需import particles from 'particles.js' import particles from 'particles.js' Vue.use(particles) 3. tem...
vue 实现粒子特效(vue-particles)
localhost
08-08 986
vue 实现粒子特效(vue-particles)
vue工程：使用vue-particles实现动态粒子效果且只作为背景显示（包括样式设置）
2401_84435942的博客
04-29 799
2.3 使用 vue-particles在vue文件template标签中：id=“particles-js” /* 此处可以手动定义id为默认值particles-js，也可以不写 *//* 圆点设置： 颜色、透明度、数量、外形、大小 *//* 线的设置： 颜色、线宽、、透明度、最大连接距离、移动速度，等等 */class=“lizi” //此处又定义了一个类class，也可以通过它设置粒子样式三、具体参数说明========默认’#dedede’。粒子颜色。
干货：Vue粒子特效（vue-particles插件(1)，【干货
Python毕设源码程序王哥
04-02 923
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
VUE粒子特效vue-particles插件使用
sunshineTing2的博客
02-23 1436
vue-particles粒子特效 第一步：下载包 vue-particles npm install --save vue-particles 第二步：在main.js中引入 vue-particles包 import VueParticles from "vue-particles"; Vue.use(VueParticles) 第三步：在.vue文件中使用 VueParticles <vue-particles color="#0293dd" :particl
【Web开发】粒子插件vue-particles的使用
兴趣使然的创作者
02-15 2785
今日在尝试开发一个登录界面时，发现背景是一张图片挺平平无奇，为了让界面更加炫酷，学习使用粒子插件vue-particles 插件安装 npm install vue-particles --save 在main.js内导入 import VueParticles from 'vue-particles' Vue.use(VueParticles) 在Login.vue内插入代码 <vue-particles color="#409EFF"
vue引入WPS插件到浏览器页面中
04-27
要在Vue应用程序中引入WPS插件到浏览器页面中，可以按照以下步骤进行操作： 1. 在Vue项目中安装wps插件的npm包，可以使用命令：`npm install wps-office-web`。 2. 在Vue组件中引入WPS插件的js文件。可以使用命令...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘明同学呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值