前端嘛

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>嘻嘻不嘻嘻</title>
    <style>
      body {
        background: #2e394d;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      * {
        box-sizing: border-box;
      }
      *:before,
      *:after {
        content: '';
        position: absolute;
      }
      input {
        height: 40px;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 40px;
      }

      .toggle {
        position: relative;
        display: inline-block;
      }

      label.toggle-item {
        width: 7em;
        background: #c487de;
        height: 3em;
        display: inline-block;
        border-radius: 50px;
        margin: 40px;
        position: relative;
        transition: all 0.3s ease;
        transform-origin: 20% center;
        cursor: pointer;
      }
      label.toggle-item:before {
        display: block;
        transition: all 0.2s ease;
        width: 2.3em;
        height: 2.3em;
        top: 0.25em;
        left: 0.25em;
        border-radius: 2em;
        border: 2px solid #88cf8f;
        transition: 0.3s ease;
      }

      .dog-rollover label:before {
        content: none;
      }
      .dog-rollover label .dog {
        display: inline-block;
        position: absolute;
        width: 2.5em;
        height: 2.5em;
        top: 0.25em;
        left: 0.2em;
        transition: 0.6s ease;
      }
      .dog-rollover label .eyes {
        position: absolute;
        width: 8px;
        height: 8px;
        background: #222;
        border-radius: 50%;
        transform: translate(8px, 14px);
        box-shadow: 16px 0 0 #222, 22px -4px 0 12px #e4ac04;
      }
      .dog-rollover label .ear {
        width: 18px;
        height: 20px;
        position: absolute;
        left: -4px;
        bottom: 80%;
        background: #f9bb00;
        margin-bottom: -5px;
        border-radius: 50% 50% 0 0/100% 100% 0 0;
        box-shadow: inset 4px 0 0 0px #ffffff, inset -4px 0 0 0px #ffffff;
        transform: rotate(-40deg);
      }
      .dog-rollover label .ear.right {
        transform: rotate(60deg) scaleX(-1);
        left: auto;
        transform-origin: center bottom;
        transition: 0.4s ease-in-out;
        right: 0px;
      }
      .dog-rollover label .face {
        overflow: hidden;
        border-radius: 50%;
        width: 2.5em;
        height: 2.5em;
        position: absolute;
        background: #fff;
        z-index: 8;
      }
      .dog-rollover label .mouth {
        position: absolute;
        background: #222;
        width: 14px;
        height: 7px;
        left: 50%;
        margin-left: -7px;
        bottom: 12px;
        border-radius: 2px 2px 20px 20px;
        bottom: 8px;
        transform: scale(0);
        transition: 0.1s ease;
      }
      .dog-rollover label .mouth:before {
        width: 8px;
        height: 8px;
        background: #ec788d;
        border-radius: 0 0 50% 50%;
        transform: translate(3px, 5px);
      }
      .dog-rollover label:before {
        border-color: white;
        background: white;
      }

      #doggo:checked ~ .cup {
        animation: 0.2s linear cup 1s forwards;
      }
      #doggo:checked + label .dog {
        left: 68px;
        transform: rotate(360deg);
      }
      #doggo:checked + label .mouth {
        transform: scale(1);
        transition-delay: 0.7s;
      }
      #doggo:checked + label .ear.right {
        transform: scaleX(-1) rotate(-35deg);
        transition-delay: 0.6s;
      }
    </style>
  </head>
  <body>
    <div class="toggle-wrapper">
      <div class="toggle dog-rollover">
        <input id="doggo" type="checkbox" />
        <label class="toggle-item" for="doggo">
          <div class="dog">
            <div class="ear"></div>
            <div class="ear right"></div>
            <div class="face">
              <div class="eyes"></div>
              <div class="mouth"></div>
            </div>
          </div>
        </label>
      </div>
    </div>
  </body>
</html>