Maison > Article > interface Web > Guide d'animation CSS : apprenez étape par étape à créer des effets de tremblement

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

WBOYoriginal: 2023-10-20 14:27:121442parcourir

Guide danimation 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 spéciaux tremblants

Dans la conception Web, les effets d'animation sont l'un des éléments importants pour améliorer l'expérience utilisateur et attirer l'attention des utilisateurs. L'animation CSS est une technologie qui utilise du CSS pur pour obtenir des effets d'animation. Aujourd'hui, nous allons vous apprendre étape par étape comment créer un effet de tremblement époustouflant pour rendre votre page Web plus vivante et intéressante.

Tout d’abord, créons une structure HTML de base. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
  <title>CSS动画指南</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box"></div>
</body>
</html>

Ensuite, nous devons ajouter des définitions de style et d'animation pertinentes au fichier CSS (supposé être style.css ici). Le code est le suivant :

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(-10px, -10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0);
  }
}

Dans le code ci-dessus, nous avons ajouté un effet d'animation de 0,5 seconde à l'élément .box et défini le nom de l'animation sur shake. Ensuite, nous définissons les images clés de l'animation shake via le mot-clé @keyframes. .box元素添加了一个0.5秒的动画效果，并将动画名称设置为shake。然后，我们通过@keyframes关键字定义了shake动画的关键帧。

在关键帧中，我们设置了五个时间点的样式变化。0%表示动画的起始状态，100%表示动画的结束状态。25%、50%和75%分别表示了动画在不同时间点的中间状态。通过使用transform属性和translate函数，我们可以使元素在水平和竖直方向上产生位移，从而实现颤抖的效果。

最后，我们需要将上述代码保存为style.css

Dans l'image clé, nous définissons les changements de style à cinq moments. 0 % représente l'état de départ de l'animation et 100 % représente l'état final de l'animation. 25 %, 50 % et 75 % représentent respectivement l'état intermédiaire de l'animation à différents instants. En utilisant l'attribut transform et la fonction translate, nous pouvons déplacer des éléments horizontalement et verticalement pour obtenir un effet de tremblement.

Enfin, nous devons enregistrer le code ci-dessus en tant que fichier style.css et l'associer au fichier HTML. Ensuite, nous pouvons voir notre effet de tremblement dans le navigateur.

Ci-dessus sont les étapes complètes pour créer des effets spéciaux tremblants. Vous pouvez ajuster des paramètres tels que la durée de l'animation, le déplacement et la couleur en fonction de vos besoins pour la rendre plus adaptée à votre conception Web. 🎜🎜Pour résumer, la technologie d'animation CSS offre aux concepteurs Web un moyen simple et puissant d'obtenir des effets d'animation. En maîtrisant les technologies et les outils pertinents, vous pouvez facilement ajouter divers effets d'animation à vos pages Web pour améliorer l'expérience utilisateur et attirer l'attention des utilisateurs. J’espère que cet article vous sera utile, et je vous souhaite d’aller toujours plus loin sur la route du web design ! 🎜

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 transform

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：Explication détaillée des propriétés de transition CSS : transition-timing-function et transition-delayArticle suivant：Explication détaillée des propriétés de transition CSS : transition-timing-function et transition-delay

Articles Liés

Voir plus