Maison > Article > interface Web > Guide d'animation CSS : apprenez étape par étape à créer un effet clignotant
Guide d'animation CSS : apprenez étape par étape à créer un effet clignotant
- 王林original
- 2023-10-20 15:24:301575parcourir
Guide d'animation CSS : vous apprenez étape par étape comment créer l'effet clignotant
L'effet clignotant est un effet d'animation CSS courant qui peut apporter des effets vifs et uniques grâce à une simple implémentation de code. Cet article vous fournira un guide étape par étape sur la façon d'utiliser CSS pour créer un effet de clignotement, avec des exemples de code spécifiques.
- Créer une structure HTML
Tout d'abord, nous devons créer une structure HTML pour afficher l'effet clignotant. Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<title>眨眼特效</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="eye-container">
<div class="eye">
<div class="eyelid"></div>
<div class="pupil"></div>
</div>
</div>
</body>
</html>Dans le code ci-dessus, nous utilisons un .eye-container pour envelopper le conteneur eye. Ensuite, nous avons créé un .eye à l'intérieur du conteneur pour représenter l'apparence de l'œil, y compris la paupière supérieure et la pupille. .eye-container来包裹眼睛的容器。然后，我们在容器内部创建了一个.eye作为眼睛的外观，同时包含了上眼皮和瞳孔。
- 设置基本样式
接下来，我们需要在style.css文件中设置基本样式，为眼睛元素添加一些基本样式。代码如下：
.eye-container {
position: relative;
width: 100px;
height: 100px;
}
.eye {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
overflow: hidden;
}
.eyelid {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
background-color: #000;
transition: transform 0.2s ease-in-out;
}
.pupil {
position: absolute;
top: 50%;
left: 0;
width: 50%;
height: 50%;
background-color: #000;
border-radius: 50%;
transform: translate(25%, 25%);
transition: transform 0.2s ease-in-out;
}在上述代码中，我们为眼睛的容器.eye-container设置了宽度和高度，并指定了它的位置为相对定位。然后，我们为眼睛元素.eye设置了宽度和高度，以及背景色和圆角样式。同时，我们也为上眼皮.eyelid和瞳孔.pupil设置了宽度、高度、背景色和过渡效果。
- 添加动画效果
现在，我们要为眼睛添加眨眼的动画效果。我们可以通过CSS的关键帧动画来实现这一效果。代码如下：
@keyframes blink {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.1);
}
}
.eye:hover .eyelid {
animation: blink 0.4s 0.1s infinite alternate;
}
.eye:hover .pupil {
animation: blink 0.4s 0.1s infinite alternate-reverse;
}在上述代码中，我们定义了一个名为blink的关键帧动画。该动画在0%的时候，眼睛的上眼皮保持原样；在100%的时候，上眼皮通过transform: scaleY(0.1)将其缩小至0.1倍。
同时，我们在.eye:hover .eyelid和.eye:hover .pupil中应用了这个动画。当鼠标悬停在眼睛元素上时，上眼皮和瞳孔都会应用动画效果，通过animation
- Définir les styles de base
- Ensuite, nous devons définir les styles de base dans le fichier
style.csspour ajouter des styles de base aux éléments oculaires. Le code est le suivant :
Dans le code ci-dessus, nous définissons la largeur et la hauteur du conteneur oculaire .eye-container et spécifions sa position comme positionnement relatif. Ensuite, nous définissons la largeur et la hauteur de l'élément eye .eye, ainsi que la couleur d'arrière-plan et le style des coins arrondis. Dans le même temps, nous définissons également la largeur, la hauteur, la couleur d'arrière-plan et l'effet de transition pour la paupière supérieure .eyelid et la pupille .pupil.
Ajouter un effet d'animation
Maintenant, nous allons ajouter un effet d'animation clignotant aux yeux. Nous pouvons obtenir cet effet grâce à l'animation d'images clés CSS. Le code est le suivant :- rrreee
- Dans le code ci-dessus, nous définissons une animation d'image clé nommée
blink. À 0 % de l'animation, la paupière supérieure de l'œil reste la même ; à 100 %, la paupière supérieure est réduite à 0,1 fois viatransform: scaleY(0.1). - En même temps, nous avons appliqué cette animation dans
.eye:hover .eyelidet.eye:hover .pupil. Lorsque la souris survole l'élément œil, les effets d'animation seront appliqués aux paupières supérieures et aux pupilles. Le nom de l'animation, la durée, le temps de retard et la méthode de boucle sont spécifiés via l'attributanimation. - Compléter l'effet clignotant
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!