Maison > Article > interface Web > Tutoriel d'animation CSS : vous apprenez étape par étape comment implémenter les effets de rotation et de zoom

Tutoriel d'animation CSS : vous apprenez étape par étape comment implémenter les effets de rotation et de zoom

PHPzoriginal: 2023-10-18 10:22:481687parcourir

Tutoriel danimation CSS : vous apprenez étape par étape comment implémenter les effets de rotation et de zoom

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

L'animation CSS est l'une des technologies importantes pour obtenir des effets interactifs sur les pages Web. Ce didacticiel vous apprendra étape par étape comment utiliser CSS pour obtenir des effets de rotation et de mise à l'échelle. Avant d'étudier ce tutoriel, assurez-vous d'avoir une certaine compréhension des bases du CSS.

Préparation

Avant de commencer, vous avez besoin d'un éditeur pour écrire du code, tel que Sublime Text, Visual Studio Code, etc. Lors de l'écriture de code, vous pouvez créer un fichier HTML et y introduire des styles CSS.

Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML. Dans cet exemple, nous allons créer un simple cercle.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="circle"></div>
</body>
</html>

Dans le code ci-dessus, nous avons introduit un fichier CSS nommé style.css et créé un élément div avec un cercle de classe dans le corps.

Écriture de styles CSS

Ensuite, nous écrirons les styles CSS dans le fichier style.css. Tout d’abord, nous devons définir la largeur et la hauteur de l’élément .circle et définir sa forme sur un cercle.

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

Dans le code ci-dessus, nous définissons la largeur et la hauteur de l'élément .circle à 200px et définissons ses coins à 50%, formant ainsi un cercle.

Ajouter des effets d'animation

Ensuite, nous ajouterons des effets d'animation à l'élément .circle. Cette animation comprendra deux parties : rotation et mise à l'échelle.

Tout d’abord, nous ajouterons l’animation de rotation. Dans le fichier .style.css, ajoutez le code suivant :

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.circle {
  /* 省略之前的代码 */
  animation: rotate 4s infinite;
}

Dans le code ci-dessus, nous avons défini une animation appelée rotate à l'aide du mot-clé @keyframes. Cette animation commence à partir de l'état initial de 0 %, en faisant pivoter l'élément .circle de 0 degrés, jusqu'à l'état final de 100 %, en faisant pivoter l'élément .circle de 360 degrés. Nous appliquons ensuite cette animation à l'élément .circle en utilisant l'attribut animation et fixons la durée de l'animation à 4 secondes, en répétant des temps infinis.

Ensuite, nous ajouterons l'animation de zoom. Dans le fichier .style.css, ajoutez le code suivant :

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.circle {
  /* 省略之前的代码 */
  animation: rotate 4s infinite, scale 2s infinite;
}

Dans le code ci-dessus, nous avons défini une animation appelée scale en utilisant le mot-clé @keyframes. Cette animation commence à partir d'un état initial de 0 %, en gardant l'élément .circle à sa taille d'origine, jusqu'à un état intermédiaire de 50 %, en agrandissant l'élément .circle 1,5 fois, jusqu'à un état final de 100 %, renvoyant l'élément .circle. à sa taille originale. Nous appliquons ensuite cette animation à l'élément .circle en utilisant l'attribut animation et fixons la durée de l'animation à 2 secondes, en répétant des temps infinis.

Affichage de l'effet

Maintenant, vous pouvez enregistrer et exécuter ce fichier HTML et afficher l'effet dans le navigateur. Vous verrez un cercle tournant et zoomant. Vous pouvez modifier les styles CSS et les propriétés d'animation en fonction de vos besoins pour obtenir différents effets de rotation et de mise à l'échelle.

Résumé

L'animation CSS peut nous aider à obtenir divers effets interactifs dans les pages Web. Dans ce didacticiel, nous vous apprenons étape par étape comment utiliser CSS pour obtenir des effets de rotation et de mise à l'échelle. En étudiant ce tutoriel, j'espère que vous pourrez maîtriser la technologie d'animation CSS de base et l'appliquer dans des projets réels. Si vous souhaitez en savoir plus sur les techniques et méthodes d'animation CSS, veuillez continuer à étudier en profondeur. Bonne chance pour écrire de superbes animations CSS !

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!

css html class animation visual studio visual studio code sublime text

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser CSS pour créer un effet de colonne d'actualités à défilement horizontalArticle suivant：Comment utiliser CSS pour créer un effet de colonne d'actualités à défilement horizontal

Articles Liés

Voir plus