Guide d'animation CSS : apprenez étape par étape à créer des effets de tremblement

Guide d'animation CSS : vous apprenez étape par étape comment créer des effets de tremblement

Dans la conception Web, les effets d'animation peuvent ajouter une sensation vivante et interactive à la page. L'animation CSS est une technologie qui permet d'obtenir des effets d'animation en appliquant des règles CSS sur les pages Web. L'un des effets d'animation courants est l'effet Secouer, qui peut ajouter un effet d'animation tremblant aux éléments et ajouter de la vitalité à la page Web. Cet article vous guidera à partir de zéro, vous apprendra étape par étape comment créer un effet de tremblement et fournira des exemples de code spécifiques.

Première étape : créer une structure HTML
Tout d'abord, nous devons créer un élément supposé être "shake" dans le fichier HTML. Vous pouvez l'envelopper avec une balise

et y ajouter un attribut d'ID unique, tel que "shake-element". Voici un exemple de code :

<div id="shake-element">
  这里是要添加抖动特效的内容
</div>

Étape 2 : Définir les styles CSS
Ensuite, nous devons définir les styles CSS pour ajouter des effets de gigue aux éléments. Nous allons définir une position de départ pour l'élément, puis créer un effet de gigue en appliquant un effet d'animation d'image clé. Voici un exemple de code de style CSS :

#shake-element {
  position: relative;
  animation: shake-animation 1s infinite;
}

@keyframes shake-animation {
  0% { transform: translateX(0); }
  10% { transform: translateX(-10px); }
  20% { transform: translateX(10px); }
  30% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  50% { transform: translateX(-10px); }
  60% { transform: translateX(10px); }
  70% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  90% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

Dans ce code CSS, nous définissons d'abord l'attribut position: relative来确保其相对于原始位置进行抖动。然后，通过关键帧动画@keyframes来定义抖动动画的具体效果。在关键帧动画中，每个百分比定义了元素的不同位置，通过transform: translateX() de l'élément afin de contrôler la traduction horizontale de l'élément. Dans l'exemple, nous utilisons 10 % du temps pour contrôler la position de jitter de l'élément.

Étape 3 : Appliquer le style CSS
Dans la dernière étape, nous devons appliquer le style CSS défini à l'élément HTML, c'est-à-dire le sélectionner via l'attribut ID de la balise et référencer le style CSS. Dans la balise d'un fichier HTML, nous pouvons utiliser la balise