Tutoriel d'animation CSS : vous apprendrez étape par étape comment implémenter des effets de dégradé de mise à l'échelle

Tutoriel d'animation CSS : vous apprendrez étape par étape comment implémenter des effets de dégradé de zoom

Dans la conception Web moderne, les effets d'animation sont l'un des éléments importants pour attirer l'attention des utilisateurs et améliorer l'expérience utilisateur. L'animation CSS est un effet d'animation basé sur les attributs de style CSS. Des effets dynamiques peuvent être obtenus en modifiant les valeurs des attributs de style des éléments. Dans cet article, nous vous apprendrons étape par étape comment utiliser l'animation CSS pour obtenir des effets de mise à l'échelle et de dégradé, ainsi que des exemples de code spécifiques.

1. Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML pour placer les éléments qui doivent être animés. Dans cet exemple, nous créons un conteneur contenant une icône circulaire flottante. Le code HTML est le suivant :

<div class="container">
  <div class="circle"></div>
</div>

2. Ajouter des styles

Ensuite, nous devons ajouter des styles à l'icône du conteneur et du cercle. Nous utiliserons CSS pour définir le style du conteneur, y compris les propriétés telles que la largeur, la hauteur et la couleur d'arrière-plan. Le style de l'icône circulaire sera modifié ultérieurement dans l'animation. Le code CSS est le suivant :

.container {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 60px;
  height: 60px;
  background-color: #ff7f50;
  border-radius: 50%;
}

3. Création d'une animation

Maintenant, nous commençons à créer des effets d'animation. Nous utiliserons des images clés pour configurer les différentes étapes de l'animation et les appliquer à l'icône circulaire. Dans cet exemple, nous allons implémenter un effet de dégradé de mise à l'échelle, faisant passer l'icône circulaire de petite à grande et changeant progressivement la couleur d'arrière-plan. Le code CSS est le suivant :

@keyframes scale-effect {
  0% {
    transform: scale(0.5);
    background-color: #ff7f50;
  }
  50% {
    transform: scale(1.5);
    background-color: #87ceeb;
  }
  100% {
    transform: scale(1);
    background-color: #ff7f50;
  }
}

.circle {
  animation: scale-effect 2s infinite;
}

Dans le code ci-dessus, nous définissons une animation d'image clé appelée scale-effect. Au stade 0 % de l'animation, nous définissons l'échelle de l'icône du cercle sur 0,5 et la couleur d'arrière-plan sur orange. Au stade 50%, on augmente le zoom à 1,5 et la couleur de fond passe au bleu ciel. Enfin, au stade 100 %, on remet l'échelle à 1 et la couleur de fond revient à l'orange. Nous pouvons appliquer cette animation à l'icône circulaire en appliquant l'attribut animation à la classe .circle.

4. Effet complet

Maintenant, nous avons terminé le code CSS pour l'effet de dégradé de mise à l'échelle. Enregistrez les fichiers HTML et CSS et ouvrez le fichier HTML dans votre navigateur, vous verrez une icône circulaire flottante qui évolue et change constamment la couleur d'arrière-plan.

Grâce à ce didacticiel, vous avez appris à utiliser l'animation CSS pour obtenir des effets de dégradé de mise à l'échelle. Dans la conception Web réelle, vous pouvez personnaliser différentes étapes et propriétés de l'animation selon vos besoins pour obtenir des effets d'animation plus riches et plus intéressants. J'espère que ce tutoriel vous sera utile pour votre apprentissage et votre pratique !

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!