刚刚！我用 CSS 实现了一个暗夜猫眼

前言

这次给大家带来一个比较暗黑系的效果 —— 暗夜猫眼。这是一双会眨动的猫眼睛。

为了可以更加直观地看到该效果，大家直接看下面的动态效果预览。

效果预览

该效果是由纯 CSS 实现，话不多说，我们直接进入实现部分。

HTML 部分

首先我们看到 HTML 部分，该部分是整个效果的基建部分。相关代码如下。

<div class="container">
      <span class="eye left"></span>
      <span class="eye right"></span>
    </div>

我们创建了两个部分，其中包含一个容器 container 和两个眼睛 eye left 和 eye right。

这里使用了两个 span 标签来表示左眼和右眼，分别添加了类名 eye left 和 eye right。这样的设计是为了在页面上展示眼睛，并且后面会通过 CSS 样式来控制它们的位置和样式。通过添加不同的样式和动画效果，可以让这两个眼睛看起来更加生动和有趣。

CSS 部分

然后是 CSS 部分，通过 CSS 来给这双眼睛赋予动态效果。相关代码如下。

 body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: black;
    }
    .container {
      font-size: 10px;
      width: 40em;
      height: 10em;
      display: flex;
      justify-content: space-between;
    }
    .eye {
      box-sizing: border-box;
      width: 15em;
      border: solid white;
      border-width: 0 5em;
      border-radius: 50% 0;
      animation: blink 2s linear infinite;
    }

首先，设置了 body 元素的样式，使其占据整个视口高度，居中显示，并设置背景颜色为黑色。然后，设置了一个容器元素 .container 的样式，设置了字体大小、宽度和高度，并使其内部的元素水平居中显示。接着，定义了一个 .eye 类，设置了眼睛的样式，包括宽度、边框样式、边框宽度、边框圆角和动画效果。这里使用了一个名为 blink 的动画，持续时间为 2 秒，线性运动，无限循环。整体效果是一个简单的眨眼动画效果。

然后接下来就是上面提到的关于 blink 动画的 CSS 样式的编写，相关代码如下。

   @keyframes blink {
      40%,
      60% {
        border-width: 0 5em;
      }
      50% {
        border-width: 0 7.5em;
      }
    }
    .eye.left {
      transform: rotate(25deg);
    }
    .eye.right {
      transform: rotateY(180deg) rotate(25deg);
    }

这里定义了眼睛元素的样式，设置了眼睛的大小和边框样式，以及动画效果。动画效果使用了 @keyframes 来定义，让眼睛在 40% 到 60% 之间的时间内眨眼，眼睛的边框宽度会从 5em 变为 7.5em，然后再恢复为 5em。

最后分别定义了左眼和右眼的样式，左眼使用了 rotate(25deg) 来旋转眼睛，右眼则使用了 rotateY(180deg) rotate(25deg) 来旋转眼睛，使其看起来向右转动。

总体来说，这段代码实现了一个简单的动态眼睛效果，让眼睛看起来在眨眼并且能够转动。

总结

以上就是暗夜猫眼效果的实现过程了，代码简单易懂，通过纯 CSS 来实现该效果，另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~