vue particles.js 登录背景实现粒子动效

粒子动画效果像蜘蛛网一样，铺平伸缩，丝滑翻转，给页面增加诸多有趣之处，令人眼前一亮。

简单小结粒子动效在vue中的实践和使用。

一，npm下载

npm install particles.js

二，新建 particles.json

{"particles": {"number": {"value": 80,"density": {"enable": true,"value_area": 800}},"color": {"value": "#dedede"},"shape": {"type": "polygon","stroke": {"width": 0,"color": "#000000"},"polygon": {"nb_sides": 5},"image": {"src": "img/github.svg","width": 100,"height": 100}},"opacity": {"value": 0.5,"random": false,"anim": {"enable": false,"speed": 0.5,"opacity_min": 0.1,"sync": false}},"size": {"value": 3,"random": true,"anim": {"enable": false,"speed": 40,"size_min": 0.1,"sync": false}},"line_linked": {"enable": true,"distance": 150,"color": "#dedede","opacity": 0.4,"width": 1.8},"move": {"enable": true,"speed": 4,"direction": "none","random": false,"straight": false,"out_mode": "out","bounce": false,"attract": {"enable": false,"rotateX": 600,"rotateY": 1200}}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": true,"mode": "repulse"},"onclick": {"enable": true,"mode": "push"},"resize": true},"modes": {"grab": {"distance": 400,"line_linked": {"opacity": 1}},"bubble": {"distance": 400,"size": 40,"duration": 2,"opacity": 8,"speed": 3},"repulse": {"distance": 80,"duration": 0.4},"push": {"particles_nb": 4},"remove": {"particles_nb": 2}}},"retina_detect": false
}

三，页面中引入

import particles from 'particles.js'
import PcParticles from "./particles.json"

四，页面渲染

a，

 <div class="login" id="particlesId"></div>

b，

#particlesId{position: relative;width: 100%;height: 600px;background:linear-gradient(0deg,rgb(7, 33, 99),rgb(3, 17, 51));background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;
}

c，

 mounted(){particlesJS("particlesId",PcParticles)}

五，效果图

vue particles.js 登录背景实现粒子动效相关推荐

Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
three相机在模型上_基于 three.js 的 3D 粒子动效实现
作者:个推web前端开发工程师梁神一.背景粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单 ...
Canvas实现网页星空背景粒子动效跟随光标
目录 1. 设计思路 2. 星空背景图片 3. 页面代码 4. 效果图 1. 设计思路 1. 利用样式插入星空背景图片: 2.设置窗口改变时自动修改画布大小(自适应): 3. 编写随机函数(随机数 ...
button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...
怎么实现hover_web前端CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助canvas了,比如下面这个案例点击预览( ...
canvas 文字颜色_canvas 中普通动效与粒子动效的实现
(给前端大全加星标,提升前端技能) 作者:薄荷前端 https://github.com/BooheeFE/weekly/issues/26 canvas 用于在网页上绘制图像.动画,可以将其理解为画 ...
CSS-动效纯css粒子动效 | 转圈圈 | 上下弹动
文章目录粒子动效转圈圈上下弹动粒子动效拾人牙慧,主要是利用css的box-shadow属性,设置便宜点位,然后加上animation属性失效的效果. PS:实际使用中发现如果屏幕尺寸很宽的话 ...
Android自定义View高级动效---粒子动效实现|音乐播放器粒子动效|实现酷我网易云粒子动效
篇章目标介绍之前看到网易云,酷我音乐都发布过用于播放器页面粒子动效的效果,于是打算自己也动手做一个,产品目标是对标酷我手机app的动效设计,实现过程完全基于自身的推测理解予以实现.计划通过两次完全完 ...
酷炫背景粒子插件particles.js星空背景使用示例源码 - 附演示及下载地址
官方给的例子有点复杂,项目中一般就引一个 JS 文件然后调用好了,简单粗暴,网上很少有想要的效果,而且都没有源码,这里分享一个文章目录一.源码地址二.实现效果 1. 电脑端 2. 手机端三.源 ...
vue类似直播点赞的撒花动效
用vue实现类似直播点赞的撒花动效,点击撒花按钮,花朵依次冒出,分别向两边扩开,到中间时向中间回笼,在继续往上飘,当移动到百分之九十几的时候用透明度渐变淡出消失,总体效果如下: 主要使用CSS3的@k ...

vue particles.js 登录背景实现粒子动效

vue particles.js 登录背景实现粒子动效相关推荐

最新文章

热门文章