vue插件vue-particles,粒子动画特效背景,收藏起来,避免找不到!!

前端资料汇总

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。

首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。

更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

在这里插入图片描述

上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动。

一直中意这种动态插件,今天有时间,迫不及待试了一波~

  • 安装插件

npm install vue-particles --save-dev

  • 在main.js文件中全局引入

import VueParticles from ‘vue-particles’

Vue.use(VueParticles)

  • 在vue文件中使用

<vue-particles

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”>

将动态粒子作为背景图来用,当有新的div需要呈现时,会发现div是不能覆盖vue-particles 内容的,会依次靠后显示。因此,加入了position:absolute,当有新div盒子的时候,设置为position:relative

App.vue 文件——一个完整的例子:

<vue-particles

color=“#fff”

:particleOpacity=“0.7”

:particlesNumber=“60”

shapeType=“circle”

:particleSize=“4”

linesColor=“#fff”

:linesWidth=“1”

:lineLinked=“true”

:lineOpacity=“0.4”

:linesDistance=“150”

:moveSpeed=“2”

:hoverEffect=“true”

最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值