Example:

Code:

<template> <div id="login"> <! < vue-Particles color="#09498b" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" Opacity="0 ": opacity ="0" : opacity ="0 ": opacity ="0" : opacity ="0 ": opacity ="0" : opacity ="0 ": opacity ="0" : opacity ="0 ": opacity ="0" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" > </vue-particles> <div class="cartoon"> <div v-for="d in imageClass" :key="d" :class="['cartoon-img',d]"></div> </div> </div> </template>Copy the code

API tutorial:

Color: String. The default '# dedede'. Particle color. ParticleOpacity: Number type. The default is 0.7. Particle transparency. ParticlesNumber: Indicates the Number type. The default of 80. Number of particles. ShapeType: indicates the String type. The default 'circle'. Available particle appearance types are: "Circle "," Edge ","triangle"," Polygon "," Star ". ParticleSize: Indicates the Number type. The default of 80. Size of a single particle. LinesColor: String. The default '# dedede'. Line color. LinesWidth: Number type. 1 by default. Line width. LineLinked: Boolean type. True by default. Whether the connection cable is available. LineOpacity: Number type. The default is 0.4. Line transparency. LinesDistance: Number type. The default of 150. Line distance. MoveSpeed: Indicates the Number type. 3 by default. The velocity of the particle. HoverEffect: Boolean type. True by default. Whether there are Hover effects. HoverMode: String. True by default. Available hover modes are: "grab", "repulse", "bubble". ClickEffect: Boolean type. True by default. Is there a click effect? ClickMode: String. True by default. Available click modes are: "push", "remove", "rePulse ", and "bubble".Copy the code

The plugin’s official website: vue-particles.netlify.app/