Chargeurs d'élément unique: les points

Cet article explore la création d'animations de chargement à l'aide d'un seul élément div. Nous avons déjà disséqué le chargeur de rotation; Maintenant, abordons une autre animation familière: les points .

Les chargeurs de points sont omniprésents. Leur attrait réside dans leur simplicité: trois points, ressemblant à une ellipses de texte (…), effectuant une séquence visuelle dynamique.

Aperçu de la série

• Chargeurs d'élément unique: le spinner
• Chargeurs à élément unique: les points - Article actuel
• Chargeurs d'élément unique: les barres
• Chargeurs d'élément unique: aller 3D

Notre objectif est de reproduire cette animation en utilisant une seule div, éliminant le besoin de divs individuels par point ou d'animations séparées. L'exemple ci-dessus y parvient en utilisant un seul div, CSS, et aucun pseudo-éléments, combinant intelligemment les techniques d'arrière-plan et de masque. L'illusion des points changant des couleurs est créée en animant un dégradé d'arrière-plan.

Animer l'arrière-plan

Commençons par l'animation d'arrière-plan:

 .loader {
  Largeur: 180px;
  Ratio d'aspect: 8/5;
  arrière-plan: 
    conique-gradient (rouge 50%, bleu 0) sans répétition, 
    gradient conique (vert 50%, violet 0) sans répétition;
  taille de fond: 200% 50%; 
  Animation: Back 4S Infinite Linear;
}

@KeyFrames Back {
  0%, 100% {position de fond: 0% 0%, 0% 100%; }
  25% {Position d'arrière-plan: 100% 0%, 0% 100%; }
  50% {position de fond: 100% 0%, 100% 100%; }
  75% {Position d'arrière-plan: 0% 0%, 100% 100%; }
}

L'élément .loader 180px de large affiche deux gradients coniques avec des transitions de couleurs nettes. La moitié supérieure utilise le rouge et le bleu, la moitié inférieure verte et le violet. La largeur de 200% garantit qu'une seule couleur est visible à la fois dans chaque moitié. L'animation passe à travers des positions, créant l'illusion du changement de couleur.

Pour une compréhension plus approfondie de background-position , reportez-vous à cette réponse de débordement de pile . L'animation manipule intelligemment les coordonnées X et Y des gradients.

Pourquoi conic-gradient() au lieu de linear-gradient() ?

L'utilisation conic-gradient() est plus concise et obtient le même résultat.

En ajustant la fonction de synchronisation de l'animation de linear aux steps(1) , nous éliminons le clignotement des couleurs.

Créer les points

Comme dans l'article précédent, nous utilisons les masques CSS . Les masques nous permettent de révéler sélectivement des parties d'un arrière-plan. Ici, nous allons créer des points, révélant les gradients de fond à travers eux.

Nous utiliserons radial-gradient() :

 .loader {
  / * ... styles précédents ... * /
  --_ G: Radial-Gradient (# 000 68%, # 0000 71%) sans répétition;
  Masque: var (--_ g), var (--_ g), var (--_ g);
  Masque de la taille: 25% 40%;
}

Une variable CSS, --_g , simplifie le code. Trois gradients radiaux créent les points.

Maintenant, nous avons besoin d'une animation pour déplacer les points:

 .loader {
  / * ... styles précédents ... * /
  Animation: chargement 2s Infinite;
}

@KeyFrames Load {
  0%, 100% {Position de masque: 0% 0%, 50% 0%, 100% 0%; }
  16,67% {Position de masque: 0% 100%, 50% 0%, 100% 0%; }
  33,33% {Position de masque: 0% 100%, 50% 100%, 100% 0%; }
  50% {Position de masque: 0% 100%, 50% 100%, 100% 100%; }
  66,67% {Position de masque: 0% 0%, 50% 100%, 100% 100%; }
  83,33% {Position de masque: 0% 0%, 50% 0%, 100% 100%; }
}

Cette animation ajuste la coordonnée en y de mask-position de chaque point, créant le mouvement de haut en bas. La combinaison de cela avec l'animation de gradient produit l'effet final.

Variations et autres exemples

La variable CSS permet des ajustements de couleur et de taille faciles. Différentes animations peuvent également être créées en modifiant les images clés. D'autres exemples, y compris un chargeur à un seul point et un chargeur d'effet blobby, sont disponibles ici . Une approche de la grille CSS est également montrée, simplifiant le dimensionnement et le positionnement.

Conclusion et étapes suivantes

Cet article a démontré la création de chargeurs de points avec une seule div. Le prochain article couvrira les chargeurs de bar , s'appuyant sur les techniques apprises ici.

Aperçu de la série

• Chargeurs d'élément unique: le spinner
• Chargeurs à élément unique: les points - Article actuel
• Chargeurs d'élément unique: les barres
• Chargeurs d'élément unique: aller 3D

(N'oubliez pas de remplacer https://www.php.cn/link/9fc36fa768a74fa93d3ee7bf57b1392c et https://www.php.cn/link/0c6ba56676353996dff5efb2b7789e1e avec les liens réels.

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!