Utilisez CSS pour charger des effets d'animation de texte

De nos jours, l'animation est la fonctionnalité la plus puissante d'une application pour attirer plus d'utilisateurs, elle augmente l'intérêt des utilisateurs pour l'exploration de l'application. Dans les applications Web, nous pouvons créer des animations en utilisant HTML et CSS. Cependant, nous pouvons créer des animations en utilisant JavaScript, mais cela ralentira le site Web.

Dans ce tutoriel, nous apprendrons à charger une animation de texte en utilisant HTML et CSS. Lors de l’obtention de données depuis une API ou du chargement d’une page Web, il est important d’animer le texte de chargement pour le rendre plus attrayant.

Exemple 1

Dans l'exemple ci-dessous, nous avons créé les éléments div « loader » et « loader-inner » en son sein. En CSS, nous donnons au div du chargeur une taille fixe et l'animons à l'aide de l'image clé "rotation". Nous fixons la durée de l'animation à 3 secondes.

De plus, nous avons défini des images clés de rotation interne pour l’élément div interne du chargeur et la position dans l’élément div du chargeur.

Dans les images clés Rotation et Rotation interne, nous déplaçons le chargeur de 0 degrés à 360 degrés. Les utilisateurs peuvent observer le chargeur en rotation dans la sortie, avec le texte de chargement au milieu.

   
  
Creating the  Loading text animation using the CSS 
 
 
 
 
 Loading 
 
  

Exemple 2

Dans l'exemple ci-dessous, nous avons créé une barre de chargement. Ici, nous avons créé un élément div de chargeur et un élément div de barre à l'intérieur. Nous avons défini la taille de l'élément div du chargeur et l'animation de l'élément bar en CSS.

Nous utilisons des images clés "bar-animation" pour animer. Dans "bar-animation", nous modifions la largeur de l'élément div pour qu'il se comporte comme une barre de chargement.

   
  
Creating the  Loading text animation using the CSS.  
 
 
 
 
 
  Loading  
  

Exemple 3

Dans l'exemple ci-dessous, nous avons créé un texte de chargement par rebond. Ici, nous ajoutons chaque caractère du mot Loading dans un élément div distinct. Après cela, nous animons tous les personnages à l'aide d'images clés "animation". Dans l'image clé "Animation", nous modifions la position verticale du personnage.

De plus, nous avons utilisé la méthode « n-th-child() » pour accéder à tous les éléments div un par un et définir le délai d'animation. Dans la sortie, l’utilisateur peut observer le texte de chargement rebondissant.

   
  
Creating the  Loading text animation using the CSS.  
 
 
 L 
 
 o 
 
 a 
 
 d 
 
 i 
 
 n 
 
 g 
 
 . 
 
 . 
 
 . 
 
  

Exemple 4

Dans l'exemple ci-dessous, nous avons ajouté un effet de flou sur le texte de chargement. Ici, nous ajoutons chaque caractère du mot de chargement dans un élément "span" distinct. Après cela, nous accédons à chaque élément span un par un en utilisant la méthode CSS 'n-th-child()' pour ajouter une animation. Dans l'élément span, nous avons ajouté une animation "texte flou" avec un délai d'animation spécifique.

Dans les images clés d'animation, nous appliquons un filtre de flou au texte pour afficher un effet de flou courant sur le texte chargé.

   
  
Creating the  Loading text animation using the CSS.  
 
  L   O   A   D   I   N   G  
  

Les utilisateurs ont appris 4 types différents d'animations de chargement dans ce didacticiel. Dans le premier exemple, nous créons un indicateur de chargement rotatif avec du texte. Dans le deuxième exemple, nous créons une barre de chargement. De plus, dans le troisième exemple, nous avons créé un texte à chargement rebond et dans le dernier exemple, nous avons ajouté un effet de flou au texte.

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!