前端嘛

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>有双眼睛盯着我的鼠标</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: black;
      }
      @property --eyelid {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 0%;
      }
      @property --eyelid2 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 0%;
      }
      .eyes {
        width: 250px;
        padding-block: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;

        div {
          position: relative;
          width: 90px;
          aspect-ratio: 1;
          background: white;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          &:before,
          &:after {
            content: '';
            position: absolute;
            width: 116%;
            height: 165%;
            left: 50%;
            animation: eyelid 5s ease-in-out infinite;
            z-index: 1;
          }
          &:before {
            top: 0;
            border-radius: 0% 0% 40% 40%;
            transform: translateY(var(--eyelid)) translateX(-50%);
            border-bottom: 40px solid black;
          }
          &:after {
            bottom: 0;
            border-radius: 40% 40% 0% 0%;
            transform: translateY(var(--eyelid2)) translateX(-50%);
            border-top: 40px solid black;
          }
          i {
            position: absolute;
            width: 60px;
            aspect-ratio: inherit;
            background: black;
            border-radius: inherit;
          }
        }
      }

      @keyframes eyelid {
        0% {
          --eyelid: -50%;
          --eyelid2: 50%;
        }
        3% {
          --eyelid: 0%;
          --eyelid2: 0%;
        }
        6% {
          --eyelid: -50%;
          --eyelid2: 50%;
        }
        9%,
        100% {
          --eyelid: 0%;
          --eyelid2: 0%;
        }
      }
    </style>
  </head>
  <body>
    <div class="eyes">
      <div>
        <i></i>
      </div>
      <div>
        <i></i>
      </div>
    </div>
    <script>
      document.addEventListener('mousemove', (e) => {
        const eyesContainer = document.querySelector('.eyes');
        const eyes = document.querySelectorAll('.eyes > div');

        if (!eyesContainer || eyes.length !== 2) return;

        const containerRect = eyesContainer.getBoundingClientRect();
        const containerCenterX = containerRect.left + containerRect.width / 2;
        const containerCenterY = containerRect.top + containerRect.height / 2;

        const angle = Math.atan2(
          e.clientY - containerCenterY,
          e.clientX - containerCenterX
        );
        const distance = Math.min(
          eyes[0].offsetWidth / 4,
          Math.sqrt(
            Math.pow(e.clientX - containerCenterX, 2) +
              Math.pow(e.clientY - containerCenterY, 2)
          )
        );

        const moveX = Math.cos(angle) * distance;
        const moveY = Math.sin(angle) * distance;

        eyes.forEach((eye) => {
          const eyeBall = eye.querySelector('i');
          eyeBall.style.transform = `translate(${moveX}px, ${moveY}px)`;
        });
      });
    </script>
  </body>
</html>