Utilisez l'effet de particules dynamique des particules pour optimiser la page de connexion

avant-propos

Le livre continue du chapitre précédent. Nous n'avons pas créé la page de connexion Sunset Afterglow. Pour le dire franchement, ce n'est qu'une image d'arrière-plan. Je pense qu'elle doit être encore optimisée pour obtenir un effet plus grand. 所图所示，我想要背后的动态粒子效果, commençons, sur la base de l'ancien code : vue2 et elementUI créent une page de connexion Sunset Afterglow et une vérification du curseur

plug-in d'importation

npm install vue-particles --save-dev

Une fois l'importation réussie, il y aura une ligne supplémentaire

Modifier le paramètre

import Vue from 'vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue'

// 动态粒子特效
import VueParticles from 'vue-particles'
Vue.use(VueParticles)

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
    
    
  router,
  render: h => h(App),
}).$mount('#app')

modifier la page de connexion

<template>
  <div>
    <div>
      <el-form>
       ......
      </el-form>
    </div>

    <div class="particles">
      <vue-particles
        color="#dedede"
        shapeType="star"
        linesColor="#dedede"
        hoverMode="grab"
        clickMode="push"
        style="height: 100%"
      ></vue-particles>
    </div>
  </div>
</template>

Pour supprimer d'abord le style d'arrière-plan précédent, puis écrire une particule, cela peut être réalisé

.particles {
    
    
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -1;
  background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%,rgba(181, 197, 216, 1) 57%);
}

Aperçu de l'effet

Il semble que l'effet n'est pas mauvais, ce genre de particules dynamiques fait augmenter de façon exponentielle la qualité globale de la page de connexion !
Ancienne démo, adresse de téléchargement : https://download.csdn.net/download/QQ727338622/87789070

Propriétés de la pièce jointe

• couleur : Type de chaîne. '#dedede' par défaut. Couleur des particules.
• particuleOpacity : type de nombre. La valeur par défaut est 0,7. Transparence des particules.
• nombre_particules : type de nombre. La valeur par défaut est 80. nombre de particules.
• shapeType : Type de chaîne. Par défaut, 'cercle'. Les types d'apparence de particules disponibles sont : "cercle", "arête", "triangle", "polygone", "étoile".
• taille de particule : type de nombre. La valeur par défaut est 80. taille des particules individuelles.
• linesColor : Type de chaîne. '#dedede' par défaut. Couleur de la ligne.
• linesWidth : Type de nombre. La valeur par défaut est 1. largeur de ligne.
• lineLinked : type booléen. La valeur par défaut est true. Le câble est-il disponible.
• lineOpacity : Type de nombre. La valeur par défaut est 0,4. Transparence des lignes.
• linesDistance : Type de nombre. La valeur par défaut est 150. distance de ligne.
• moveSpeed : Type de nombre. Par défaut 3. Vitesse des particules.
• hoverEffect : type booléen. La valeur par défaut est true. S'il y a un effet de survol.
• hoverMode : Type de chaîne. La valeur par défaut est true. Les modes de vol stationnaire disponibles sont : "grab", "repulse", "bubble".
• clickEffect : type booléen. La valeur par défaut est true. S'il y a un effet de clic.
• clickMode : Type de chaîne. La valeur par défaut est true. Les modes de clic disponibles sont : "pousser", "supprimer", "repousser", "bulle".