粒子动画 particles.js 在vue中的使用

1.安装particlesJS

npm install --save particles.js

2.创建particles.json文件，设置particles的配置参数

 {"particles": {"number": {"value": 40,"density": {"enable": true,"value_area": 800}},"color": {"value": "#ffffff"},"shape": {"type": "circle","stroke": {"width": 0,"color": "#000000"},"polygon": {"nb_sides": 5},"image": {"src": "img/github.svg","width": 100,"height": 100}},"opacity": {"value": 0.7,"random": false,"anim": {"enable": false,"speed": 1,"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": "#ffffff","opacity": 0.6,"width": 1},"move": {"enable": true,"speed": 6,"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": "grab"},"onclick": {"enable": true,"mode": "push"},"resize": true},"modes": {"grab": {"distance": 200,"line_linked": {"opacity": 1}},"bubble": {"distance": 400,"size": 40,"duration": 2,"opacity": 8,"speed": 3},"repulse": {"distance": 200,"duration": 0.4},"push": {"particles_nb": 4},"remove": {"particles_nb": 2}}},"retina_detect": false
}

3.创建styleOflogin.css文件，设置div背景颜色或图片

 #particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;}

4.引入（局部引入）

 <style scoped>@import "../../public/css/styleOflogin.css";
</style>
<template><div style="min-height:730px; height:100px"><div id="particles-js"></div></div>
</template><script>import particlesJs from "particles.js";import particlesConfig from "./particles.json";export default {data() {return {};},mounted() {particlesJS("particles-js", particlesConfig);},};

5.效果图

参考文章
https://www.cnblogs.com/wangyihong/p/8618305.html

粒子动画 particles.js 在vue中的使用相关推荐

Moment.js在Vue中使用
Moment.js在Vue中使用 1. 安装依赖包 npm install moment --save 2. main.js中引入 import moment from 'moment' Vue.pr ...
js 或者vue中for循环去掉最后一个逗号
js 或者vue中for循环去掉最后一个逗号一个感觉很简单的问题,刚开始我没有思路,现在也没有更好的思路问题描述: 后端返回的一个数组,前端这边需要循环把名字展示,要求在展示时,每个名字后用** ...
【Vue实用功能】Vue中实现粒子效果 particles.js
Vue中实现粒子效果为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果下载particles.j ...
高德地图中加载three.js（vue中）（封装
这几天公司有一个要结合高德地图的智慧园区的项目(大致就是在3d地图中加载自己的three.js模型) 1.首先要引入高德地图官方文档给出来的引用方法 <template><div ...
Raphael.js 在vue中使用说明, 以杭州市地图为例
一.Vue中引入raphael.js npm install --save raphael 二.组件component中新建,下面为代码 <template> <div id=&qu ...
酷炫背景粒子插件particles.js星空背景使用示例源码 - 附演示及下载地址
官方给的例子有点复杂,项目中一般就引一个 JS 文件然后调用好了,简单粗暴,网上很少有想要的效果,而且都没有源码,这里分享一个文章目录一.源码地址二.实现效果 1. 电脑端 2. 手机端三.源 ...
原生JS实现vue中data值的修改与渲染
前言砖搬多了就得想想怎么造砖,Vue使用多了,也得想想Vue是咋实现,Vue用着确实舒服,仔细了解一下,背后做的操作也太多了吧,但是再多的操作也是一个一个积累起来的吧! 先记录一下怎么实现data中 ...
three.js在Vue中出现Can‘t resolve ‘zlib‘ ‘fs‘‘path‘‘stream‘错误
在学three.js过程中,引入RGBELoader之后出现Can't resolve 'zlib' 'fs''path''stream'错误具体报错信息如下: webpack < 5 use ...
chartjs更新数据 vue_vue.js - 在vue中怎么更改chart图表的文字大小
问题 import {Line} from 'vue-chartjs' export default Line.extend({ data () { return { gradient: null, ...

粒子动画 particles.js 在vue中的使用

粒子动画 particles.js 在vue中的使用相关推荐

最新文章

热门文章