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 :
CSS动画指南
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 surshake
. Ensuite, nous définissons les images clés de l'animationshake
via le mot-clé@keyframes
..box
元素添加了一个0.5秒的动画效果,并将动画名称设置为shake
。然后,我们通过@keyframes
关键字定义了shake
动画的关键帧。
在关键帧中,我们设置了五个时间点的样式变化。0%表示动画的起始状态,100%表示动画的结束状态。25%、50%和75%分别表示了动画在不同时间点的中间状态。通过使用transform
属性和translate
函数,我们可以使元素在水平和竖直方向上产生位移,从而实现颤抖的效果。
最后,我们需要将上述代码保存为style.css
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!