前端嘛

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>蛙跳特效点赞爱心</title>
    <style>
      :root {
        --heart-color-1: #fff;
        --heart-color-2: #24ffbe;
        --heart-color-3: #72ff24;
        --heart-color-4: #ffe024;
        --heart-color-5: #ff7124;
        --heart-color-6: #ff2424;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #2a2c31;
      }

      .heart-icon {
        position: relative;
        cursor: pointer;
        width: 50px;
        height: 50px;
      }

      .heart-icon svg {
        position: absolute;
        top: 0;
        left: 0;
      }

      .heart-icon svg:nth-of-type(1) {
        z-index: 6;
        fill: var(--heart-color-1);
        stroke: var(--heart-color-1);
      }
      .heart-icon svg:nth-of-type(2) {
        z-index: 5;
        fill: var(--heart-color-2);
        stroke: var(--heart-color-2);
      }
      .heart-icon svg:nth-of-type(3) {
        z-index: 4;
        fill: var(--heart-color-3);
        stroke: var(--heart-color-3);
      }
      .heart-icon svg:nth-of-type(4) {
        z-index: 3;
        fill: var(--heart-color-4);
        stroke: var(--heart-color-4);
      }
      .heart-icon svg:nth-of-type(5) {
        z-index: 2;
        fill: var(--heart-color-5);
        stroke: var(--heart-color-5);
      }
      .heart-icon svg:nth-of-type(6) {
        z-index: 1;
        fill: var(--heart-color-6);
        stroke: var(--heart-color-6);
      }

      .leap {
        animation: leap 0.8s;
        transition-timing-function: cubic-bezier(0, 1, 1, 1);
        animation-fill-mode: forwards;
      }

      @keyframes leap {
        50% {
          transform: translateY(-150px);
        }
        90% {
          transform: translateY(2px);
        }
        100% {
          transform: translateY(0);
        }
      }
    </style>
  </head>
  <body>
    <div class="heart-icon" id="heart">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z"
        />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z"
        />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z"
        />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z"
        />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z"
        />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z"
        />
      </svg>
    </div>

    <script>
      let heartButton = document.getElementById('heart');
      let hearts = Array.from(heartButton.children);
      hearts.reverse();

      heartButton.addEventListener('click', function () {
        let heartIndex = 0;
        for (let heart of hearts) {
          animateLeap(heartIndex++);
        }
        hearts.reverse();
      });

      function animateLeap(heartIndex) {
        // Remove class to restart animation
        hearts[heartIndex].classList.remove('leap');
        hearts[heartIndex].offsetWidth;

        setTimeout(() => {
          hearts[heartIndex].classList.add('leap');
          setTimeout(() => {
            hearts[heartIndex].style.zIndex = heartIndex;
            hearts[heartIndex].style.strokeWidth = heartIndex / 4 + 'px';
          }, 200); // 1/4 the time of the animation
        }, 5 * (heartIndex * 10));
      }
    </script>
  </body>
</html>