[分享]css3动画眨眼睛

CSS3动画是现代网站设计中非常常见的元素之一。其中，眨眼睛的动画是一种非常有趣和可爱的动画效果。使用CSS3的关键帧动画技术，我们可以轻松地为网站中的头像、表情等元素添加这种效果。.eye { he...

CSS3动画是现代网站设计中非常常见的元素之一。其中，眨眼睛的动画是一种非常有趣和可爱的动画效果。使用CSS3的关键帧动画技术，我们可以轻松地为网站中的头像、表情等元素添加这种效果。

.eye {
  height: 50px;
  width: 50px;
  border: 3px solid black;
  border-radius: 50%;
  position: relative;
}

.eye::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  animation: blink 4s infinite;
}

@keyframes blink {
  0% {
    height: 20px;
    width: 20px;
  }
  80% {
    height: 0;
    width: 20px;
  }
  100% {
    height: 20px;
    width: 20px;
  }
} 

我们首先定义了一个类名为“eye”的元素，用于展示眼睛的外观。然后，我们使用伪类“::after”为眼睛添加一个白色的圆形，表示眼珠。在这个圆形上，我们定义了一个关键帧动画“blink”，设置它在4秒内不停地重复播放。

在“blink”动画中，我们定义了3个关键帧，从最初的状态到80%时眼珠的高度会减小为0，然后在100%回到最初状态，完成了眨眼的效果。

使用这个代码，我们可以很容易地为任何元素添加这个可爱又有趣的眨眼睛动画效果，为网站带来更多的趣味与活力。