html+css-动画爱心

最新推荐文章于 2023-02-09 13:00:27 发布

codingFunTime

最新推荐文章于 2023-02-09 13:00:27 发布

阅读量350

点赞数

分类专栏：前端动画文章标签： css html css3

原文链接：https://gitee.com/codingstartup/animated-heart/tree/main

版权

前端动画专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - Animated Heart</title>
  <link rel="stylesheet" href="./style.css">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    svg {
      width: 200px;
      position: relative;
      z-index: 10;
    }

    #heart {
      fill: rgb(184, 181, 181);  /* 填充颜色 */
      stroke-width: 20px;      /* 线宽 */
      stroke: red;    /* 线颜色 */
      stroke-dasharray: 1600;    /* 线总距离 */
      stroke-dashoffset: 1600;     /* 线偏移量 */
      stroke-linecap: round;
    }

    span,
    span::after {
      display: block;
      width: 24px;
      height: 24px;
      background-color: transparent;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      /* 展现周围的红色 */
      box-shadow: 0 -160px 0 red, 0 160px 0 red, -160px 0 0 red, 160px 0 0 red;
    }

    span::after {
      content: '';
      transform: translate(-50%, -50%) rotate(45deg) scale(0);
    }

    input[type="checkbox"] {
      display: none;
    }

    label {
      cursor: pointer;
    }

    input[type="checkbox"]:checked+svg #heart {
      animation: 1s draw-heart linear forwards;
    }

    @keyframes draw-heart {
      0% {
        stroke-dashoffset: 1600;
      }

      80% {
        stroke-dashoffset: 0;
        fill: #eee;
      }

      100% {
        fill: red;
        stroke-dashoffset: 0;
      }
    }

    input[type="checkbox"]:checked~span {
      animation: .5s blink ease-in-out forwards .85s;  /* 延时0.85s */
    }

    input[type="checkbox"]:checked~span::after {
      animation: .5s blink-after ease-in-out forwards .85s;  /* 延时0.85s */
    }

    @keyframes blink {
      0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: .8;
      }

      50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .8;
      }

      100% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0;
      }
    }

    @keyframes blink-after {
      0% {
        transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
        opacity: .8;
      }

      50% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
        opacity: .8;
      }

      100% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1.1);
        opacity: 0;
      }
    }

    input[type="checkbox"]:checked+svg {
      animation: 1s pop linear forwards;    /* 爱心变大 */
    }

    @keyframes pop {
      0% {
        transform: scale(1);
      }

      70% {
        transform: scale(1);
      }

      80% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }
  </style>
</head>

<body>
  <label>
    <input type="checkbox">
    <svg viewBox="0 0 532 532">
      <path id="heart" transform="translate(10, 10)"
        d="M256,96.5l-19.7-20.3C186.1,24.3,104.5,15.9,49.7,62.6c-62.8,53.6-66.1,149.8-9.9,207.9l193.5,199.8 c12.5,12.9,32.8,12.9,45.3,0l193.5-199.8c56.3-58.1,53-154.3-9.8-207.9l0,0C407.5,15.9,326,24.3,275.7,76.2L256,96.5z" />
    </svg>
    <span></span>
  </label>

</body>

</html>