Guide d'animation CSS : apprenez étape par étape à créer des effets de tremblement-tutoriel CSS-php.cn

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

WBOY

Libérer： 2023-10-20 14:27:12

original

1441 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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