Guide d'animation CSS : vous apprend étape par étape comment créer des effets spéciaux de battement de cœur
Introduction :
L'animation CSS est une technologie couramment utilisée dans la conception Web. Elle peut faire en sorte que les éléments Web statiques présentent des effets dynamiques et augmentent l'expérience interactive de l'utilisateur. . Parmi eux, l'effet de battement de cœur est un effet d'animation très populaire. Il peut faire apparaître des éléments à un rythme battant, donnant aux gens une sensation de vivacité. Dans cet article, je vais vous présenter en détail comment utiliser CSS pour créer un simple effet de battement de cœur et fournir des exemples de code spécifiques.
Étape 1 : Préparer la structure HTML
Tout d'abord, nous devons créer un fichier HTML et écrire le code suivant dans le fichier :
Dans le code ci-dessus, nous créons un élémentdiv
et lui donnons ajoute une classe nomméeheartbeat
. Ensuite, nous devons ajouter des styles au fichier CSS pour définir cet élément.div
元素,并给它添加了一个类名为heartbeat
。接下来,我们需要在CSS文件中添加样式来定义这个元素。
步骤二:添加CSS样式
在当前目录下创建一个名为style.css
的CSS文件,并在文件中编写以下代码:
.heartbeat { width: 100px; height: 100px; background-color: red; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: heartbeat 1s ease infinite; } @keyframes heartbeat { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
在上述代码中,我们首先通过.heartbeat
选择器来定义我们的心跳特效元素的样式。我们将它的宽度和高度设置为100px,并给它添加了一个红色的背景颜色和圆角边框。
接下来,我们将这个元素的位置通过position
属性设置为absolute
,并通过top
和left
属性将它居中对齐。
然后,我们使用transform
属性和translate
函数来实现元素的居中定位,这样我们心跳特效元素就能在屏幕的中央水平垂直居中显示。
最后,我们使用animation
属性来添加一个名为heartbeat
的动画效果,并将动画的持续时间设置为1秒,缓动函数设置为ease
,无限循环播放。接下来,我们需要定义这个动画的关键帧效果。
在@keyframes
Créez un fichier CSS nomméstyle.css
dans le répertoire courant, et écrivez le code suivant dans le fichier :
rrreee
Ensuite, nous définissons la position de cet élément surabsolute
via l'attributposition
, et la définissons viatop
etleftproperty pour l'aligner au centre.
transform
et la fonction
translate
pour obtenir le positionnement central de l'élément, afin que notre élément d'effet spécial de battement de coeur puisse être affiché horizontalement et verticalement dans le centre de l’écran. Enfin, nous utilisons l'attribut
animation
pour ajouter un effet d'animation nommé
heartbeat
, et définissons la durée de l'animation sur 1 seconde et la fonction d'accélération sur
ease
, lecture en boucle infinie. Ensuite, nous devons définir les effets d'images clés de cette animation. Dans la règle
@keyframes
, nous définissons les images clés de l'effet d'animation. De 0 % à 50 % du temps, nous animons l'élément pour agrandir et réduire la transparence, et de 50 % à 100 %, nous animons l'élément à sa taille d'origine et à son état totalement opaque. Étape 3 : Aperçu du navigateurIl ne nous reste plus qu'à ouvrir le fichier HTML que nous avons créé dans le navigateur pour voir l'effet spécial de battement de cœur que nous avons créé. Lorsque nous actualisons la page, les éléments d'effet spécial de battement de cœur apparaîtront à un rythme battant, donnant aux gens la sensation d'un cœur qui bat. Résumé : Grâce à cet article, nous avons appris à utiliser CSS pour créer un simple effet de battement de cœur. Nous avons réussi à obtenir l'effet d'un cœur battant en définissant le style de l'élément et en ajoutant des effets d'animation. En apprenant et en maîtrisant les principes et les techniques de base de l'animation CSS, nous pouvons l'appliquer à davantage de conceptions Web et offrir aux utilisateurs une expérience interactive plus vivante et intéressante. J'espère que cet article pourra aider tout le monde à mieux comprendre et appliquer la technologie d'animation CSS.
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!