Animation de chargement de page Web CSS : créez divers effets d'animation de chargement sympas

Lorsque les utilisateurs accèdent à une page Web, le plus impatient est d'attendre que la page se charge. Afin d'atténuer l'anxiété des utilisateurs, de nombreux sites Web ont commencé à utiliser des animations de chargement CSS pour rendre le chargement des pages plus intéressant. Dans cet article, nous apprendrons comment utiliser CSS pour créer divers effets d'animation de chargement sympas et fournirons des exemples de code spécifiques pour vous aider à l'implémenter.

1. Animation de base

Tout d'abord, créons quelques animations de chargement de base. Nous pouvons utiliser la propriété animation en CSS pour créer une animation de base. La propriété animation possède plusieurs sous-propriétés, comme suit :

• animation-name : Sélectionnez le nom de la règle d'image clé à appliquer.
• animation-durée : Définissez la durée d'un cycle (en secondes ou millisecondes).
• animation-timing-function : Définissez une courbe de vitesse de cycle.
• animation-delay : Définit le temps de retard d'un cycle.
• animation-iteration-count : définit le nombre de fois que l'animation doit être jouée.

Maintenant, examinons quelques différents types d'animations de chargement de base.

1. Animation de rotation

Dans cette animation de chargement, nous utilisons le code suivant pour définir une image clé de rotation :

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

Le code ci-dessus utilise la règle @keyframes pour définir une image clé nommée "rotate". Dans cette image clé, nous utilisons l'attribut transform pour définir la rotation. Dans from et to, on définit le degré de rotation, de 0 à 360 degrés.

Ensuite, nous devons spécifier cette animation pour notre élément "loader" :

.loader {
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Animation de clignotement

Dans cette animation de chargement, nous utilisons le code suivant pour définir une image clé clignotante en boucle :

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}

Ci-dessus Le code utilise la règle @keyframes pour définir une image clé nommée "blink". Dans cette image clé, nous utilisons la propriété opacity pour définir la transparence de l'élément. À 50 %, nous le fixons à 0,5, ce qui le fera alterner entre deux états.

Pour appliquer cette animation à notre élément "loader", utilisez le code suivant :

.loader {
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

II. ANIMATION AVANCÉE

Maintenant que nous avons appris à créer une animation de chargement de base en CSS, explorons plus en détail comment créer une animation plus avancée. animations. Voici quelques animations de chargement intéressantes et leurs exemples de code.

1. Animation de vague

Dans cette animation de chargement, nous utilisons le code suivant pour définir l'image clé d'un mode vague :

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  
  50% {
    transform: translateX(30px) translateY(15px);
  }
  
  100% {
    transform: translateX(0) translateY(0);
  }
}

Dans le code ci-dessus, nous utilisons l'attribut transform pour créer l'effet de vague. Aux positions 0% et 100%, nous remettons l'élément à sa position initiale. À la position 50 %, nous utilisons TranslateX (traduction horizontale) et TranslateY (traduction verticale) pour créer la forme d'onde.

Ensuite, nous spécifions cette animation pour notre élément "loader" :

.loader {
  animation-name: wave;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Animation de diffusion

Dans cette animation de chargement, nous utilisons le code suivant pour définir une image clé de diffusion :

@keyframes spread {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  
  50% {
    transform: scale(1);
    opacity: 0.1;
  }
  
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
}

Dans le code ci-dessus, nous utilisons l'attribut transform pour créer un effet de diffusion. A 0% et 100% nous remettons l'élément à ses valeurs initiales de minimisation et de transparence. A la position 50%, nous utilisons la propriété scale pour créer l'animation de diffusion.

Ensuite, nous spécifions cette animation pour notre élément « loader » :

.loader {
  animation-name: spread;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

Résumé

En utilisant CSS, nous pouvons créer différents types d'animations de chargement pour nos sites Web. Ces animations de chargement peuvent rendre le chargement des pages plus intéressant et soulager l'anxiété d'attente des utilisateurs. Dans cet article, nous avons appris à créer des animations de chargement de base, ainsi qu'à créer des animations plus avancées. J'espère que ces exemples de code vous seront utiles dans votre travail.

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!