上班摸鱼用css 画个丑脸, 真是笑死![image.png](https://p6-juejin.byteimg.co

code.juejin.cn/pen/7296024…

<!DOCTYPE html>
<html>
  <head>
    <style>
      @keyframes moveUpDown {
        0%,
        100% {
          top: 50%;
        }
        50% {
          top: 48%;
        }
      }

      @keyframes moveLeftRight {
        0%,
        100% {
          left: 50%;
        }
        50% {
          left: 48%;
        }
      }

      @keyframes blink {
        0%,
        100% {
          height: 40px;
        }
        50% {
          height: 20px;
        }
      }

      @keyframes movePupil {
        0%,
        20% {
          transform: translate(-50%, -50%);
        }
        50% {
          transform: translate(-80%, -50%); /* 向左移动 */
        }
        70% {
          transform: translate(-10%, -50%); /* 返回到原始位置 */
        }
        100% {
          transform: translate(-50%, -50%); /* 返回到原始位置 */
        }
      }

      .face {
        width: 370px; /* 调整脸的宽度 */
        height: 200px; /* 调整脸的高度 */
        background-color: #ffd700; /* 脸的颜色 */
        border-radius: 60px 100px; /* 创建竖着的椭圆形脸 */
        position: relative;
        margin: 0 auto; /* 居中脸 */
        margin-top: 50px; /* 调整脸的垂直位置 */
      }

      .eyes-container {
        width: 200px;
        display: flex;
        justify-content: space-between;
        position: relative; /* 使眉毛相对于眼睛容器定位 */
        top: 50px;
      }

      .eye {
        width: 70px;
        height: 60px;
        background-color: white;
        border: 2px solid black;
        border-radius: 50%;
        animation: moveLeftRight 4s infinite alternate,
          moveUpDown 3s infinite alternate, blink 2s infinite;
        position: relative;
        /* overflow: hidden; */
      }

      .eyebrow {
        width: 80px; /* 调整眉毛的宽度 */
        height: 10px; /* 调整眉毛的高度 */
        background-color: #222; /* 眉毛的颜色 */
        position: absolute;
        top: -20px; /* 相对于眼睛容器的顶部位置 */
        left: 50%; /* 相对于眼睛容器的水平居中位置 */
        transform: translateX(-50%); /* 水平居中眉毛 */
        border-radius: 50px 50px 0 0; /* 创建月牙形状 */
      }

      .nose1 {
        width: 20px; /* 调整鼻子的宽度 */
        height: 20px; /* 调整鼻子的高度 */
        background-color: #ff5733; /* 鼻子的颜色 */
        position: absolute;
        top: 60px; /* 相对于眼睛容器的顶部位置，调整鼻子的位置 */
        left: 85%; /* 相对于眼睛容器的水平居中位置 */
        transform: translateX(-50%); /* 水平居中鼻子 */
        border-radius: 50%; /* 创建圆形鼻子 */
        animation: nosePulse 2s infinite alternate; /* 应用鼻孔放大缩小动画 */
      }

      .nose {
        width: 20px; /* 调整鼻孔的初始宽度 */
        height: 20px; /* 调整鼻孔的初始高度 */
        background-color: #ff5733; /* 鼻孔的颜色 */
        border-radius: 50%; /* 创建圆形鼻孔 */
        position: absolute;
        top: 80px; /* 相对于眼睛容器的顶部位置，调整鼻子的位置 */
        left: 50%; /* 相对于眼睛容器的水平居中位置 */
        transform: translateX(-50%); /* 水平居中鼻子 */
        animation: nosePulse 2s infinite alternate; /* 应用鼻孔放大缩小动画 */
      }

    
      .nose2 {
        width: 20px; /* 调整鼻子的宽度 */
        height: 20px; /* 调整鼻子的高度 */
        background-color: #ff5733; /* 鼻子的颜色 */
        position: absolute;
        top: 60px; /* 相对于眼睛容器的顶部位置，调整鼻子的位置 */
        right: -20%; /* 相对于眼睛容器的水平居中位置 */
        transform: translateX(-50%); /* 水平居中鼻子 */
        border-radius: 50%; /* 创建圆形鼻子 */
        animation: nosePulse 2s infinite alternate; /* 应用鼻孔放大缩小动画 */
      }

      @keyframes nosePulse {
        0% {
          width: 20px;
          height: 20px;
        }
        50% {
          width: 30px; /* 调整鼻孔的最大宽度 */
          height: 30px; /* 调整鼻孔的最大高度 */
        }
        100% {
          width: 20px;
          height: 20px;
        }
      }

      .mouth {
        width: 60px; /* 调整嘴巴的宽度 */
        height: 30px; /* 调整嘴巴的高度 */
        border: 2px solid #ff0000; /* 嘴巴的边框颜色 */
        border-bottom-left-radius: 50px; /* 创建左下角的圆弧 */
        border-bottom-right-radius: 50px; /* 创建右下角的圆弧 */
        position: absolute;
        top: 152px; /* 相对于脸的顶部位置 */
        left: 54%; /* 相对于脸的水平居中位置 */
        transform: translateX(-50%); /* 水平居中嘴巴 */
      }

      .pupil {
        width: 20px;
        height: 20px;
        background-color: brown;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: movePupil 4s infinite ease-in-out;
      }

      .pupil-center {
        width: 6px;
        height: 6px;
        background-color: black; /* 黑色表示中间的黑点 */
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="face">
      <div class="eyes-container">
        <div class="eye">
          <div class="eyebrow"></div>

          <div class="pupil">
            <div class="pupil-center"></div>
          </div>
        </div>
        <div class="eye">
          <div class="eyebrow"></div>
          <div class="pupil">
            <div class="pupil-center"></div>
          </div>
        </div>

        <div class="nose1"></div>
        <div class="nose2"></div>
      </div>

      <div class="mouth"></div>
    </div>
  </body>
</html>