前端嘛

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <title>别点这只喵咪</title>

    <style>
      body {
        font-family: 'Helvetica Neue';
        font-weight: 300;
        color: #000;
      }

      a {
        color: #000;
        text-decoration: none;
      }

      ul {
        list-style: none;
      }

      li {
        padding: 15px;
      }

      .container {
        width: 400px;
        margin: 0 auto;
        background: #fff;
        padding-top: 120px;
      }

      .cat {
        width: 400px;
        height: 200px;
        margin: 0 auto;
        background: #fff;
        position: relative;
        cursor: pointer;
      }

      .hidden {
        display: none;
      }

      .block {
        display: block !important;
      }

      .catHead {
        width: 100px;
        height: 71px;
        background: transparent;
        position: absolute;
        top: 15px;
        left: 150px;
        border-top: 4px solid #222;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-radius: 35% 35% 10px 11px;
        transform: rotate(15deg);
        z-index: 1;
      }

      .catHead:before {
        content: '';
        display: block;
        width: 30px;
        height: 55px;
        background: transparent;
        position: absolute;
        top: 29px;
        left: 110px;
        border-right: 4px solid #000;
        border-radius: 0 0 50%/50px 20px;
        transform: rotate(-45deg);
      }

      .catHead:after {
        content: '';
        display: block;
        width: 30px;
        height: 55px;
        background: transparent;
        position: absolute;
        top: 9px;
        right: 95px;
        border-left: 4px solid #000;
        border-radius: 50%/50px 20px 0 0;
        transform: rotate(25deg);
      }
      /* left ear */
      .catEars {
        width: 18px;
        height: 18px;
        background: #fff;
        border-left: 3px solid #000;
        border-top: 4px solid #000;
        transform: rotate(35deg);
        position: absolute;
        left: 150px;
        top: 5px;
        border-radius: 15% 0 0 10%;
        z-index: 2;
      }

      .catEars:before {
        content: '';
        height: 23px;
        background: #fff;
        border-left: 4px solid #000;
        transform: rotate(35deg);
        position: absolute;
        left: 98px;
        bottom: 43px;
        border-radius: 0 0 0 20%;
      }

      .rightEar {
        display: block;
        background: transparent;
        width: 2px;
        height: 15px;
        border-right: 4px solid #000;
        position: absolute;
        left: 106px;
        bottom: 50px;
        transform: rotate(-40deg);
        border-radius: 10% 10% 30% 10%;
      }

      .rightEar:before {
        content: '';
        width: 5px;
        height: 13px;
        border-right: 4px solid #000;
        transform: rotate(10deg);
        position: absolute;
        left: -4px;
        top: 13px;
        border-radius: 10% 10% 30% 10%;
      }

      .rightEar:after {
        content: '';
        width: 5px;
        height: 10px;
        border-right: 4px solid #000;
        transform: rotate(9deg);
        position: absolute;
        left: -6px;
        top: 25px;
        border-radius: 10% 10% 30% 10%;
      }
      /* eyes */
      .face {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #000;
        position: absolute;
        left: 140px;
        top: 50px;
      }

      .face:before {
        content: '';
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #000;
        position: absolute;
        left: 60px;
        top: 15px;
      }

      .mouth {
        display: block;
        width: 10px;
        height: 8px;
        position: absolute;
        left: 15px;
        top: 0ps;
        transform: rotate(45deg);
        border-radius: 50%;
        border: 3px solid #000;
        border-left-color: transparent;
        border-top-color: transparent;
      }

      .mouth:before {
        content: '';
        display: block;
        width: 10px;
        height: 8px;
        position: absolute;
        left: 9px;
        top: -10px;
        transform: rotate(20deg);
        border-radius: 50%;
        border: 3px solid #000;
        border-left-color: transparent;
        border-top-color: transparent;
      }

      .leftPaw {
        width: 25px;
        height: 30px;
        background: #fff;
        border: 4px solid #000;
        border-bottom: 0 solid transparent;
        border-right: 0 solid transparent;
        border-radius: 50% 40% 0 0;
        position: absolute;
        left: 90px;
        top: 40px;
        transform: rotate(-20deg);
        z-index: 2;
      }

      .leftPaw:before {
        content: '';
        display: block;
        width: 3px;
        height: 15px;
        background: #000;
        border-radius: 100% 0 0 0;
        position: absolute;
        left: 24px;
        top: 4px;
        transform: rotate(-20deg);
      }

      .rightPaw {
        width: 25px;
        height: 30px;
        background: #fff;
        border: 3px solid #000;
        border-bottom: 0 solid transparent;
        border-right: 0 solid transparent;
        border-radius: 50% 40% 0 0;
        position: absolute;
        left: 222px;
        top: 60px;
        transform: rotate(-20deg);
        z-index: 2;
      }

      .rightPaw:before {
        content: '';
        display: block;
        width: 3px;
        height: 15px;
        background: #000;
        border-radius: 100% 0 0 0;
        position: absolute;
        left: 23px;
        top: 2px;
        transform: rotate(-23deg);
      }

      .surface {
        width: 350px;
        height: 50px;
        background: #fff;
        border-top: 3px solid #000;
        transform: rotate(10deg);
        position: absolute;
        top: 215px;
        z-index: 3;
      }

      .inner-wrapper {
        padding-top: 6px;
        display: flex;
      }

      .paws {
        display: block;
        width: 8px;
        height: 10px;
        background: #f19ba5;
        border-radius: 50% 50% 30% 30%;
        position: absolute;
        top: 9px;
        left: 7px;
      }

      .circles {
        display: block;
        width: 5px;
        height: 4px;
        background: #f19ba5;
        border-radius: 50% 50% 30% 30%;
        position: absolute;
        top: -3px;
        left: 8px;
      }

      .circles:before {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        background: #f19ba5;
        border-radius: 50% 50% 30% 30%;
        position: absolute;
        top: -3px;
        left: -6px;
      }

      .circles:after {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        background: #f19ba5;
        border-radius: 50% 30%;
        position: absolute;
        top: 1px;
        left: -12px;
      }

      i {
        font-size: 24px;
        font-weight: 800;
        color: #abbac6;
        position: relative;
        left: 80px;
        padding: 10px 100px 10px 0;
      }

      .rotate {
        transform: scale(1, -1);
      }

      .red {
        color: red;
      }

      .green {
        color: limegreen;
      }

      .leftPaw2 {
        width: 40px;
        height: 28px;
        background: #fff;
        border: 4px solid #000;
        border-bottom: 0 solid transparent;
        border-right: 0 solid transparent;
        border-radius: 50% 4px 50% 50%;
        position: absolute;
        left: 87px;
        top: 58px;
        transform: rotate(-43deg);
        z-index: 4;
      }

      .leftPaw2:before {
        content: '';
        display: block;
        width: 30px;
        height: 5px;
        background: #fff;
        border-bottom: 4px solid #000;
        border-radius: 50% 4px 50% 50%;
        position: absolute;
        top: 20px;
        transform: rotate(20deg);
      }

      .rightPaw2 {
        width: 45px;
        height: 24px;
        background: #fff;
        border-bottom: 3px solid #000;
        border-left: 3px solid #000;
        border-radius: 50% 4px 0 40%;
        position: absolute;
        left: 207px;
        top: 85px;
        transform: rotate(-23deg);
        z-index: 4;
      }

      .rightPaw2:before {
        content: '';
        display: block;
        width: 20px;
        height: 5px;
        background: #fff;
        border-top: 3px solid #000;
        border-radius: 50% 4px 50% 50%;
        position: absolute;
        top: 0px;
        left: 2px;
        transform: rotate(-20deg);
      }

      .author {
        font-size: 10px;
        position: relative;
        top: -50px;
        left: 250px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="cat" onclick="hello()">
        <div class="catHead"></div>
        <div class="catEars">
          <span class="rightEar"></span>
        </div>
        <div class="face">
          <span class="mouth"></span>
        </div>
        <div id="leftPaw" class="leftPaw">
          <span id="paws" class="paws">
            <span id="circles" class="circles"></span>
          </span>
        </div>
        <div id="rightPaw" class="rightPaw">
          <span id="rpaws" class="paws">
            <span id="rcircles" class="circles"></span>
          </span>
        </div>
      </div>
      <div class="surface"></div>
    </div>

    <script>
      function hello() {
        const x = 5;
        const leftPaw = document.getElementById('leftPaw').classList;
        const rightPaw = document.getElementById('rightPaw').classList;
        const paws = document.getElementById('paws').classList;
        const circles = document.getElementById('circles').classList;
        const rpaws = document.getElementById('rpaws').classList;
        const rcircles = document.getElementById('rcircles').classList;
        leftPaw.toggle('leftPaw');
        rightPaw.toggle('rightPaw');
        paws.toggle('paws');
        circles.toggle('circles');
        rpaws.toggle('paws');
        rcircles.toggle('circles');
        leftPaw.toggle('leftPaw2');
        rightPaw.toggle('rightPaw2');
      }
    </script>
  </body>
</html>