vue框架嵌入vue-particles（粒子背景）插件

vue-particles 是什么？

它是一个粒子背景插件。地址：https://github.com/creotip/vue-particles

使用方法

安装
npm install vue-particles --save-dev
在main.js文件中全局引入

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

在App.vue 中引入使用

<template><div id="app"><vue-particlescolor="#409EFF":particleOpacity="0.7":particlesNumber="60"shapeType="circle":particleSize="6"linesColor="#409EFF":linesWidth="1":lineLinked="true":lineOpacity="0.4":linesDistance="150":moveSpeed="2":hoverEffect="true"hoverMode="grab":clickEffect="true"clickMode="push"></vue-particles><!--color: String类型。默认’#dedede’。粒子颜色。particleOpacity: Number类型。默认0.7。粒子透明度。particlesNumber: Number类型。默认80。粒子数量。shapeType: String类型。默认’circle’。可用的粒子外观类型有：“circle”,“edge”,“triangle”, “polygon”,“star”。particleSize: Number类型。默认80。单个粒子大小。linesColor: String类型。默认’#dedede’。线条颜色。linesWidth: Number类型。默认1。线条宽度。lineLinked: 布尔类型。默认true。连接线是否可用。lineOpacity: Number类型。默认0.4。线条透明度。linesDistance: Number类型。默认150。线条距离。moveSpeed: Number类型。默认3。粒子运动速度。hoverEffect: 布尔类型。默认true。是否有hover特效。hoverMode: String类型。默认true。可用的hover模式有: “grab”, “repulse”, + “bubble”。clickEffect: 布尔类型。默认true。是否有click特效。clickMode: String类型。默认true。可用的click模式有: “push”, “remove”, “repulse”, “bubble”。--><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style lang="less">
.size{width: 100%;height: 100%;
}
html,body{.size;overflow: hidden;margin: 0;padding: 0;
}
#app {.size;
}
</style><style>
#particles-js {width: 100%;height: 100%;position: absolute;top: 0;left: 0;/**background-image 替换成自己所需的图片*/background-image: url('./assets/images/particles.jpeg');background-size: cover;background-position: center;
}
</style>

vue框架嵌入vue-particles（粒子背景）插件相关推荐

vue 动态粒子背景插件
动态粒子背景效果如下: vue-particles 是粒子背景插件如何使用? 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入: i ...
超酷炫粒子背景插件—particles.js
GitHub-教程-下载 1)先到github中下载particles.js-master.zip,下载下来的文件中有一个demo案例. 2)将demo文件中的particles.min.js.sty ...
vue框架：变更页面background背景颜色 - 代码篇
vue框架:变更body,html页面background背景颜色场景bug介绍: vue页面切换,导致后面的页面背景颜色被上一个页面背景色覆盖,如何避免这个问题. Method 1. 修改 sty ...
2021-11-10 动态粒子背景插件
动态粒子背景插件安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from 'vue-par ...
Vue中使用vue-particles（粒子背景）插件美化登录页面
使用方法: 1.安装插件 npm install vue-particles --save-dev yarn add vue-particles 2.在main.js文件中全局引入 import Vu ...
前端学习笔记之-VUE框架学习-Vue核心
第一章:Vue核心 1.1.Vue简介官网介绍:https://cn.vuejs.org/v2/guide/ 1.2.初识Vue <!DOCTYPE html> <html lan ...
vue框架行内样式添加背景图片
<div class="logo" :style="{width: concetWidth+'px',height: concetHeight+'px' , 'ba ...
vue3 使用particles粒子效果插件，修改粒子画布宽高
一.安装 npm install particles.vue3 二.main.js引用 import VueParticles from "particles.vue3"; con ...
关于vue框架的一些小结。（为什么使用vue框架，vue的优缺点）
1.什么是vue Vue是一套用于构建用户界面的渐进式的JavaScript框架. 2.Vue.js的优点体积小; 更高的运行效率:基于虚拟DOM,一种可以预先通过JavaScript进行各种计算, ...

vue框架嵌入vue-particles（粒子背景）插件

vue-particles 是什么？

使用方法

vue框架嵌入vue-particles（粒子背景）插件相关推荐

最新文章

热门文章