Guide d'animation CSS : apprenez étape par étape à créer un effet clignotant-tutoriel CSS-php.cn

Guide d'animation CSS : apprenez étape par étape à créer un effet clignotant

王林

Libérer： 2023-10-20 15:24:30

original

1618 Les gens l'ont consulté

Guide danimation CSS : apprenez étape par étape à créer un effet clignotant

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>

Copier après la connexion

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

Copier après la connexion

在上述代码中，我们为眼睛的容器.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;
}

Copier après la connexion

在上述代码中，我们定义了一个名为blink的关键帧动画。该动画在0%的时候，眼睛的上眼皮保持原样；在100%的时候，上眼皮通过transform: scaleY(0.1)将其缩小至0.1倍。

同时，我们在.eye:hover .eyelid和.eye:hover .pupil中应用了这个动画。当鼠标悬停在眼睛元素上时，上眼皮和瞳孔都会应用动画效果，通过animation

Ensuite, nous devons définir les styles de base dans le fichier style.css pour 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

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 via transform: scaleY(0.1).
En même temps, nous avons appliqué cette animation dans .eye:hover .eyelid et .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'attribut animation.
Compléter l'effet clignotant

🎜🎜Enfin, nous présentons l'effet à l'utilisateur. Ouvrez le fichier HTML dans votre navigateur et vous verrez un œil avec un effet clignotant. Lorsque la souris passe au-dessus de l'œil, les paupières supérieures et les pupilles de l'œil s'ouvrent et se ferment continuellement, créant un effet de clignotement. 🎜🎜Avec ce simple guide d'animation CSS, nous vous apprenons étape par étape comment créer un effet clignotant. J'espère que ce guide vous sera utile et vous permettra d'appliquer des effets d'animation CSS uniques et intéressants dans votre conception Web. 🎜🎜Références : 🎜🎜🎜[Documentation Web MDN : Animations CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations)🎜🎜[W3School : Animations CSS3](https: / /www.w3school.com.cn/css3/css3_animation.asp)🎜🎜[Notes d'étude sur l'animation CSS3](https://www.cnblogs.com/zxj159/p/6932713.html)🎜🎜

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!