

蛙跳特效点赞爱心（Python）

码途钥匙

2025-03-26

导读：效果图1.整体代码这是一段综合运用 HTML、CSS 和 JavaScript 实现的网页特效代码，呈现带有

效果图

1.整体代码

这是一段综合运用 HTML、CSS 和 JavaScript 实现的网页特效代码，呈现带有蛙跳特效的点赞爱心功能。HTML 构建页面结构，创建爱心图标容器及六个 SVG 爱心元素；CSS 定义颜色变量、页面布局、爱心样式，并设置 “leap” 动画实现跳跃效果；JavaScript 获取爱心元素，将其子元素转为数组并反转，添加点击事件监听器，点击时调用动画函数，通过控制动画类添加、元素重绘及定时器来实现爱心依次跳跃、变色和改变描边宽度的效果。

2.HTML 部分

HTML 部分，文档声明为 HTML5，设置语言为中文，定义了页面标题，引入了 CSS 样式表，并且在页面主体中创建了一个包含爱心图标的容器，容器内有六个 SVG 元素来绘制爱心。

3.CSS 部分

CSS 部分先定义了一些颜色相关的 CSS 变量，接着设置了页面的布局和背景颜色，对爱心图标容器及其内部的 SVG 元素进行样式设置，包括定位、颜色、Z 轴顺序等。此外，还定义了一个名为 “leap” 的动画类以及对应的关键帧动画，实现爱心的跳跃效果。

4.JavaScript 部分

JavaScript 部分获取了包含爱心的元素，并将其内部的子元素转换为数组且反转顺序。然后为爱心元素添加点击事件监听器，在点击时，会依次对每个爱心调用动画函数，实现跳跃效果。动画函数先移除动画类以重启动画，利用元素的offsetWidth属性触发重绘，再通过定时器控制动画的执行，包括添加动画类、设置爱心的 Z 轴顺序和描边宽度等操作。

5.代码

<!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>