Tutoriel d'animation CSS : Apprenez étape par étape à mettre en œuvre l'effet spécial du lancer de balle

Tutoriel d'animation CSS : Apprenez-vous étape par étape à mettre en œuvre l'effet spécial du lancer de balle

Introduction :
Dans la conception Web moderne, l'animation CSS est devenue un élément indispensable. Il peut ajouter de la vivacité et de l’intérêt aux pages Web et améliorer l’expérience utilisateur. Ce tutoriel vous apprendra comment utiliser CSS pour obtenir un effet de lancer de balle grâce à une démonstration étape par étape, vous pourrez facilement maîtriser cette technique.

Étape 1 : Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML pour héberger notre sphère. Dans le fichier HTML, ajoutez le code suivant :

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

Dans cette structure, la sphère est placée dans un conteneur appelé "conteneur".

Étape 2 : Ajouter des styles CSS

Maintenant, nous allons ajouter des styles à ces éléments HTML. Ouvrez le fichier CSS et ajoutez le code suivant :

.container {
  width: 500px;
  height: 500px;
  position: relative;
}

.ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

Ici, nous définissons la largeur et la hauteur du conteneur et le positionnons par rapport. La sphère est réglée sur un positionnement absolu et placée dans le coin supérieur gauche du conteneur.

Étape 3 : Créer une animation CSS

Maintenant, nous allons créer un effet d'animation pour la sphère. Ajoutez le code suivant dans le fichier CSS :

@keyframes throw {
  0% {
    top: 0;
    left: 0;
  }
  50% {
    top: 200px;
    left: 300px;
  }
  100% {
    top: 0;
    left: 0;
  }
}

.ball {
  animation-name: throw;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Dans ce code, nous définissons une animation d'image clé appelée "throw". A l'image clé 0%, la position de la sphère est la position initiale (haut : 0 ; gauche : 0 ;). À l'image clé de 50 %, la position de la sphère est définie sur le point le plus élevé de l'action de lancement (en haut : 200 px ; à gauche : 300 px ;). Enfin, à l'image clé 100%, la sphère revient à sa position initiale.

Nous appliquons cette animation à la sphère et fixons la durée de l'animation à 2 secondes et la répétons à l'infini (animation-iteration-count : infinite ;).

Étape 4 : Prévisualisez l'effet

Enregistrez et chargez votre fichier HTML, puis prévisualisez la page Web. Vous verrez la balle être lancée le long du chemin animé prédéfini et revenir à sa position d'origine à la fin. L'ajustement des paramètres dans CSS peut permettre à la balle d'être lancée d'une autre manière, ou modifier la vitesse et le nombre de lancers.

Résumé :
Grâce à ce tutoriel, vous avez réussi à implémenter l'effet de lancement de sphère en utilisant CSS. L'animation CSS est un outil très utile et intéressant en conception Web. Maîtriser cette technique vous aidera à créer des pages Web plus attrayantes et interactives. Désormais, vous pouvez utiliser cette méthode pour créer d'autres effets d'animation intéressants et continuer à explorer davantage de possibilités d'animation CSS. J'espère que vous pourrez créer des œuvres plus étonnantes !

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!