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 :

 这里是要添加抖动特效的内容 

Copier après la connexion

É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); } }

Copier après la connexion

Dans ce code CSS, nous définissons d'abord l'attributposition: 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 balised'un fichier HTML, nous pouvons utiliser la balise

Copier après la connexion

Après avoir ajouté le code ci-dessus à la balise

À ce stade, nous avons réussi à créer un effet d'animation CSS avec des effets de tramage. Vous pouvez modifier les propriétés du style CSS selon vos besoins, telles que la vitesse, l'angle et la durée de la gigue. Dans le même temps, vous pouvez également appliquer une animation à d'autres éléments HTML.

Résumé :
L'animation CSS est une technique puissante qui peut ajouter des effets vifs et interactifs aux pages Web. Cet article vous explique comment créer des effets de tramage via CSS et fournit des exemples de code spécifiques. Vous pouvez utiliser ce guide et des exemples de code pour essayer vous-même d'autres types d'animations CSS. J'espère que grâce à l'apprentissage, vous pourrez utiliser davantage d'effets d'animation dans la conception Web pour offrir une meilleure expérience aux utilisateurs.