Introduction au code d'utilisation de Particles.js pour créer un effet de fond dynamique de superbes particules imitant Zhihu

Cet article partage avec vous Particles.js pour créer des effets de particules basés sur le canevas Canvas Le code est très simple. Les amis qui en ont besoin peuvent s'y référer

Je ne me suis pas connecté à Zhihu depuis un moment. depuis longtemps et j'ai trouvé que l'effet dynamique des particules de leur page de connexion est plutôt cool. Oui, vérifiez le code et utilisez Particles.js pour créer des effets de particules basés sur le canevas Canvas.

Photo ci-dessus

Photo ci-dessus :

C'était comme une grosse affaire, alors j'en ai fait une et j'ai joué avec .

github : https://github.com/VincentGarreau/particles.js/

Processus de fonctionnement :

Il existe une démarche de base sur Internet, vous pouvez vous y référer, mais si vous l'utilisez directement sur la page de connexion, il y aura des petits bugs et devra être ajusté.

1. Introduisez d’abord le fichier particules.js dans la page.

<script src="js/particles.js"></script>

2. Utilisez un p dans la page comme conteneur pour placer les particules. [Habituellement placé en bas, le css est à améliorer]

<p id="particles"></p>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

3. Chargement du fichier de configuration : D'après Internet, l'utilisation de la méthode load() nécessite un fichier json de configuration, et le voyant le chemin m'a désactivé.

                                                                                                                                                                                                                                                                     . Contrôler le nombre de particules, la vitesse de déplacement, etc.

particules est encore un peu problématique à utiliser. Après avoir téléchargé le fichier dans Chrome puis être passé sur cette page, il devient désactivé. Attendez une solution.

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!