vue与原生html,粒子特效(支持原生html和vue)

粒子特效(支持原生html和vue)"/>

vue与原生html,粒子特效(支持原生html和vue)

原生HTML页面使用教程：html>

particles.js

particles.js 是它的库，我们肯定是要引入的，app.js 是参数配置文件，我们也要引入，而 demo 中的 stats.js 就没有必要引入了。style.css 我们也可以引入，背景颜色是在css中设置的。

基于这个模板，我们可以在上面添加我们想要实现的功能，比如说注册登录功能，需要注意的是：用 div 来封装我们要实现的功能代码块，并且在 css 中为这个 div 设置绝对定位。

下面介绍参数配置文件 app.js 文件的使用：particles.number.value ： 粒子的数量

particles.number.density ： 粒子的稀密程度

particles.number.density.enable ： 启用粒子的稀密程度 (true 或 false)

particles.number.density.value_area ： 每一个粒子占据的空间(启用粒子密度，才可用)

particles.color.value ： 粒子的颜色 (支持16进制”#b61924”，rgb”{r:182, g:25, b:36}”，hsl，以及random)

particles.shape.type： 粒子的形状 (”circle” “edge” “triangle” “polygon” “star” “image”)

particles.opacity.value： 粒子的透明度

particles.size.anim.enable： 是否启用粒子速度(true/false)

particles.size.anim.speed： 粒子动画频率

particles.size.anim.sync： 粒子运行速度与动画是否同步

particles.move.speed： 粒子移动速度

大家可以根据这些配置文件，配置自己喜欢的背景出来，下面提供两份完整配置文件 app.js。

配置文件(经典背景){

"particles": {

"number": {

"value": 80,

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#ffffff"

},

"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": 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.4,

"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": "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": 200,

"duration": 0.4

},

"push": {

"particles_nb": 4

},

"remove": {

"particles_nb": 2

}

}

},

"retina_detect": false

}

配置文件二(星空背景)：{

"particles": {

"number": {

"value": 160,

"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": 1,

"random": true,

"anim": {

"enable": true,

"speed": 1,

"opacity_min": 0,

"sync": false

}

},

"size": {

"value": 3,

"random": true,

"anim": {

"enable": false,

"speed": 4,

"size_min": 0.3,

"sync": false

}

},

"line_linked": {

"enable": false,

"distance": 150,

"color": "#ffffff",

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 1,

"direction": "none",

"random": true,

"straight": false,

"out_mode": "out",

"bounce": false,

"attract": {

"enable": false,

"rotateX": 600,

"rotateY": 600

}

}

},

"interactivity": {

"detect_on": "canvas",

"events": {

"onhover": {

"enable": true,

"mode": "bubble"

},

"onclick": {

"enable": true,

"mode": "repulse"

},

"resize": true

},

"modes": {

"grab": {

"distance": 400,

"line_linked": {

"opacity": 1

}

},

"bubble": {

"distance": 250,

"size": 0,

"duration": 2,

"opacity": 0,

"speed": 3

},

"repulse": {

"distance": 400,

"duration": 0.4

},

"push": {

"particles_nb": 4

},

"remove": {

"particles_nb": 2

}

}

},

"retina_detect": true

}

VUE使用教程如下：

使用教程：npm install vue-particles --save-dev

main.js里加入以下代码：import VueParticles from 'vue-particles'  Vue.use(VueParticles)

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

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"

hoverMode="grab"

:clickEffect="true"

clickMode="push"

class="lizi"

>

/*如果想做背景图片 可以给标签一个class 直接添加背景图*/

属性：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"。