Maison > Article > interface Web > Guide d'animation CSS : apprenez étape par étape à créer des effets de battement de cœur
Guide d'animation CSS : apprenez étape par étape à créer des effets de battement de cœur
- PHPzoriginal
- 2023-10-20 16:19:491427parcourir
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 :
<!DOCTYPE html>
<html>
<head>
<title>心跳特效示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="heartbeat"></div>
</body>
</html>Dans le code ci-dessus, nous créons un élément div et lui donnons ajoute une classe nommée heartbeat. 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 sur absolute via l'attribut position, et la définissons via top et leftproperty 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 navigateur🎜Il 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!
Articles Liés
Voir plus- Comment utiliser du CSS pur pour obtenir les effets de pause et de lecture de l'animation CSS ? Introduction à la propriété animation-play-state (explication détaillée)
- Comment implémenter une animation en utilisant CSS ? Faites le point sur ces technologies d'animation CSS
- Apprenez étape par étape à utiliser les pointeurs en C#
- Apprenez étape par étape à utiliser PS pour ajouter l'effet de lumière Tyndall aux images (partager)
- Apprenez étape par étape à utiliser PS pour créer un effet de style papier découpé (explication détaillée avec images et texte)