Home >Web Front-end >CSS Tutorial >CSS Animation Guide: Teach you step-by-step to create a blinking effect

CSS Animation Guide: Teach you step-by-step to create a blinking effect

王林Original: 2023-10-20 15:24:301623browse

CSS Animation Guide: Teach you step-by-step to create the blinking effect

The blinking effect is a common CSS animation effect that can be realized through simple code, which can bring vividness and uniqueness Effect. This article will provide you with a step-by-step guide on how to use CSS to create a blink effect, with specific code examples.

Create HTML structure

First, we need to create an HTML structure to display the blinking effect. The code is as follows:

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

In the above code, we use a .eye-container to wrap the eye container. Then, we created an .eye inside the container as the appearance of the eye, including the upper eyelid and pupil.

Set the basic style

Next, we need to set the basic style in the style.css file and add some basic styles to the eye elements. The code is as follows:

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

In the above code, we set the width and height of the eye container .eye-container, and specified its position as relative positioning. Then, we set the width and height, as well as the background color and rounded corner style for the eye element .eye. At the same time, we also set the width, height, background color and transition effect for the upper eyelid .eyelid and pupil .pupil.

Add animation effect

Now, we are going to add a blinking animation effect to the eyes. We can achieve this effect through CSS keyframe animation. The code is as follows:

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

In the above code, we define a keyframe animation named blink. At 0% of the animation, the upper eyelid of the eye remains the same; at 100%, the upper eyelid is reduced to 0.1 times through transform: scaleY(0.1).

At the same time, we applied this animation in .eye:hover .eyelid and .eye:hover .pupil. When the mouse is hovering over the eye element, animation effects will be applied to the upper eyelids and pupils. The animation name, duration, delay time and loop method are specified through the animation properties.

Complete the blinking effect

Finally, we present the effect to the user. Open the HTML file in your browser and you'll see an eye with a blinking effect. When the mouse is hovered over the eye, the upper eyelids and pupils of the eye will continuously open and close, creating a blinking effect.

With this simple CSS animation guide, we teach you step by step how to create a blinking effect. I hope this guide will be helpful to you and enable you to apply unique and interesting CSS animation effects in your web design.

Reference:

[MDN Web Documentation: CSS Animations](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations)
[W3School: CSS3 animation](https://www.w3school.com.cn/css3/css3_animation.asp)
[CSS3 Animation study notes](https://www.cnblogs .com/zxj159/p/6932713.html)

The above is the detailed content of CSS Animation Guide: Teach you step-by-step to create a blinking effect. For more information, please follow other related articles on the PHP Chinese website!

css css3 html 循环 transform animation https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS layout property optimization tips: position sticky and flexboxNext article：CSS layout property optimization tips: position sticky and flexbox

See more

CSS Animation Guide: Teach you step-by-step to create a blinking effect

Related articles