Partage d'exemples d'effets de particules Vue

Cet article vous présente principalement l'exemple de code des effets de particules vue. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Effet de réussite :

Oui, les points et les lignes que vous voyez ci-dessus qui sont similaires au diagramme de constellation sont réalisés par vue- Les particules sont généré et peut interagir avec les événements de la souris de l'utilisateur.

Portail : vue-particles

Tutoriel

npm install vue-particles --save-dev

fichier main.js :

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

Fichier App.vue - un exemple simple :

<template> 
  <p id="app">
   <vue-particles color="#dedede"></vue-particles>
  </p>
 </template>

Fichier App.vue ——Un fichier App.vue complet exemple :

<template> 
  <p id="app">
   <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >
   </vue-particles>
  </p>
 </template>

Attribut :

• color : Type de chaîne. La valeur par défaut est « #dedede ». Couleur des particules.

• particleOpacity : Type de nombre. La valeur par défaut est 0,7. Transparence des particules.

• particlesNumber : Type de nombre. La valeur par défaut est 80. Nombre de particules.

• shapeType : Type de chaîne. La valeur par défaut est « cercle ». Les types d'apparence de particules disponibles sont : "cercle", "bord", "triangle", "polygone", "étoile".

• particleSize : Type de nombre. La valeur par défaut est 80. taille des particules individuelles.

• linesColor : Type de chaîne. La valeur par défaut est « #dedede ». Couleur de la ligne.

• linesWidth : Type de nombre. Par défaut 1. Largeur de ligne.

• lineLinked : Type booléen. Vrai par défaut. Le câble est-il disponible ?

• lineOpacity : Type de numéro. La valeur par défaut est 0,4. Transparence des lignes.

• linesDistance : Type de nombre. Par défaut 150. Distance de ligne.

• moveSpeed : Type de numéro. Par défaut 3. La vitesse de déplacement des particules.

• hoverEffect : Type booléen. Vrai par défaut. Y a-t-il un effet de survol ?

• hoverMode : Type de chaîne. Vrai par défaut. Les modes de survol disponibles sont : « saisir », « repousser », « bulle ».

• clickEffect : Type booléen. Vrai par défaut. Y a-t-il un effet de clic ?

• clickMode : Type de chaîne. Vrai par défaut. Les modes de clic disponibles sont : « pousser », « supprimer », « repousser », « bulle ».

Recommandations associées :

Canvas implémente des effets de mouvement de particules éblouissants

threeJS implémente des particules de ciel étoilé Partage d'exemples d'effets de mouvement

Comment utiliser le canevas pour créer des effets d'animation de fontaine de particules

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!