CSS-Animationsanleitung: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie einen Blinkeffekt erstellen-CSS-Tutorial-php.cn

CSS-Animationsanleitung: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie einen Blinkeffekt erstellen

王林

Freigeben： 2023-10-20 15:24:30

Original

1614 Leute haben es durchsucht

CSS-Animationsanleitung: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie einen Blinkeffekt erstellen

CSS-Animationsanleitung: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den Blinkeffekt erstellen

Der Blinkeffekt ist ein gängiger CSS-Animationseffekt, der durch einfache Codeimplementierung lebendige und einzigartige Effekte erzielen kann. In diesem Artikel finden Sie eine Schritt-für-Schritt-Anleitung zum Erstellen eines Blinkeffekts mit CSS sowie konkrete Codebeispiele.

HTML-Struktur erstellen

Zuerst müssen wir eine HTML-Struktur erstellen, um den Blinkeffekt anzuzeigen. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Im obigen Code verwenden wir einen .eye-container, um den Augencontainer zu umschließen. Anschließend haben wir im Container ein .eye als Erscheinungsbild des Auges erstellt, einschließlich des oberen Augenlids und der 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;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Als nächstes müssen wir Grundstile in der Datei style.css festlegen, um den Augenelementen einige Grundstile hinzuzufügen. Der Code lautet wie folgt:

Im obigen Code haben wir die Breite und Höhe des Augencontainers .eye-container festgelegt und seine Position als relative Positionierung angegeben. Anschließend legen wir die Breite und Höhe des Augenelements .eye sowie die Hintergrundfarbe und den Stil der abgerundeten Ecken fest. Gleichzeitig legen wir auch Breite, Höhe, Hintergrundfarbe und Übergangseffekt für das obere Augenlid .eyelid und die Pupille .pupil fest.

Animationseffekt hinzufügen

Im obigen Code definieren wir eine Keyframe-Animation mit dem Namen blink. Bei 0 % der Animation bleibt das obere Augenlid gleich; bei 100 % wird das obere Augenlid durch transform: scaleY(0.1) auf das 0,1-fache reduziert.
Gleichzeitig haben wir diese Animation in .eye:hover .eyelid und .eye:hover .pupil angewendet. Wenn sich die Maus über dem Augenelement befindet, werden Animationseffekte auf die oberen Augenlider und Pupillen angewendet. Der Animationsname, die Dauer, die Verzögerungszeit und die Schleifenmethode werden über das Attribut animation angegeben.
Vervollständigen Sie den Blinkeffekt

🎜🎜Abschließend präsentieren wir dem Benutzer den Effekt. Öffnen Sie die HTML-Datei in Ihrem Browser und Sie sehen ein Auge mit einem blinkenden Effekt. Wenn Sie mit der Maus über das Auge fahren, öffnen und schließen sich die oberen Augenlider und Pupillen kontinuierlich, wodurch ein Blinzeleffekt entsteht. 🎜🎜Mit dieser einfachen CSS-Animationsanleitung zeigen wir Ihnen Schritt für Schritt, wie Sie einen Blinkeffekt erstellen. Ich hoffe, dass dieser Leitfaden für Sie hilfreich ist und es Ihnen ermöglicht, einzigartige und interessante CSS-Animationseffekte in Ihrem Webdesign anzuwenden. 🎜🎜Referenzen: 🎜🎜🎜[MDN-Webdokumentation: CSS-Animationen](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations)🎜🎜[W3School: CSS3-Animationen](https: / /www.w3school.com.cn/css3/css3_animation.asp)🎜🎜[CSS3-Animationsstudiennotizen](https://www.cnblogs.com/zxj159/p/6932713.html)🎜🎜

Das obige ist der detaillierte Inhalt vonCSS-Animationsanleitung: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie einen Blinkeffekt erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!