1.安裝particlesJS
npm install --save particles.js
2.配置particles.js
①?在components文件夾下創(chuàng)建particles文件夾
②?在particles文件夾下創(chuàng)建particles.json文件，這個文件主要放的是particles的配置參數(shù)。下面是代碼，可直接復(fù)制到j(luò)son文件中
{
? "particles": {
? ? "number": {
? ? ? "value": 80,
? ? ? "density": {
? ? ? ? "enable": true,
? ? ? ? "value_area": 800
? ? ? }
? ? },
? ? "color": {
? ? ? "value": "#ffffff"
? ? },
? ? "shape": {
? ? ? "type": "circle",
? ? ? "stroke": {
? ? ? ? "width": 0,
? ? ? ? "color": "#000000"
? ? ? },
? ? ? "polygon": {
? ? ? ? "nb_sides": 5
? ? ? },
? ? ? "image": {
? ? ? ? "width": 100,
? ? ? ? "height": 100
? ? ? }
? ? },
? ? "opacity": {
? ? ? "value": 0.5,
? ? ? "random": false,
? ? ? "anim": {
? ? ? ? "enable": false,
? ? ? ? "speed": 1,
? ? ? ? "opacity_min": 0.1,
? ? ? ? "sync": false
? ? ? }
? ? },
? ? "size": {
? ? ? "value": 5,
? ? ? "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",
? ? ? "attract": {
? ? ? ? "enable": false,
? ? ? ? "rotateX": 600,
? ? ? ? "rotateY": 1400
? ? ? }
? ? }
? },
? "interactivity": {
? ? "detect_on": "canvas",
? ? "events": {
? ? ? "onhover": {
? ? ? ? "enable": false,
? ? ? ? "mode": "repulse"
? ? ? },
? ? ? "onclick": {
? ? ? ? "enable": false,
? ? ? ? "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
? ? ? },
? ? ? "push": {
? ? ? ? "particles_nb": 4
? ? ? },
? ? ? "remove": {
? ? ? ? "particles_nb": 2
? ? ? }
? ? }
? },
? "retina_detect": true,
? "config_demo": {
? ? "hide_card": false,
? ? "background_color": "#b61924",
? ? "background_image": "",
? ? "background_position": "50% 50%",
? ? "background_repeat": "no-repeat",
? ? "background_size": "cover"
? }
}
③?在particles文件夾下創(chuàng)建style.css文件，下面是代碼，圖片部分改為你自己的圖片路徑就可以了。如果直接設(shè)置顏色，背景圖片引入部分直接設(shè)置為空就可以了
#particles-js{
? width: 100%;
? height: 100%;
? background-color: #e76392;
? background-image: url('./img/5.jpg');
? background-size: cover;
? background-position: 50% 50%;
? background-repeat: no-repeat;
}
④?在particles文件夾下創(chuàng)建Particles.vue文件，這個文件主要是引入particles.js、引入css文件、引入json文件以下是代碼，會點Vue的基本都能看懂
<style scoped>
? @import "./style.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() {
? ? ? this.init();
? ? },
? ? methods: {
? ? ? init() {
? ? ? ? particlesJS("particles-js", particlesConfig);
? ? ? ? document.body.style.overflow = "hidden";
? ? ? }
? ? }
? };
</script>
3.在需要的組件里引用模板
OK，完成。
