svg实现空气的爱心动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg实现空气的爱心动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
  background-color: #ffd8d8;
}

#couple {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  -webkit-filter: saturate(2);
  filter: saturate(2);
}

#hearts {
  -webkit-animation: heartpulse 4s infinite;
  animation: heartpulse 4s infinite;
}

@keyframes heartpulse {
  0% {
    fill: #8c2d49;
  }
  50% {
    fill: #8e485d;
    scale: 1.1;
    -webkit-transform: scale(1.1, 1.1);
  }
  100% {
    fill: #a872a8;
  }
}
</style>



</head>

<body >
  <svg xmlns="http://www.w3.org/2000/svg" id="couple" viewBox="0 0 600 500">
  <defs />
  <g id="couple-svgs">
    <path fill="#552249" d="M343.38 283.28l.12.94a9.05 9.05 0 00-1.31 8.38c.33 1 .7 2 1.1 2.91a10.83 10.83 0 01.89 4.43 26.53 26.53 0 01-3.8 13.19 8.41 8.41 0 00-1.48 4c-.18 6.65.17 13.29-.16 20 .22-.16.47-.25.58-.43 1.16-1.94 3-2.75 5.09-3.23s4.58-.61 6.86-.94a20.91 20.91 0 017.36.12c.78.84.36 1.89.48 2.85a5.17 5.17 0 00.24 3.18l.06 1.06c-.87-.13-1.75-.19-2.6-.38-4.9-1.12-9.5-.17-14 1.9-1.74.81-3.27 2-5 2.78a3.31 3.31 0 00-2 1.82 31.08 31.08 0 01-4.61 7.24c-2.15 2.57-4 5.38-6.13 8-2 2.43-1.95 5.13-1.44 7.94a12.19 12.19 0 00.61 2.32 9.78 9.78 0 01-5.16 12.25 18.58 18.58 0 00-5.63 4.4c-1.42 1.55-1.48 2.18-.24 4a25.27 25.27 0 005 5.09c3.37 2.74 5.45 6.09 4.63 10.62-1.12 6.27-3.5 11.95-8.15 16.47a31.54 31.54 0 00-4.18 4.93c-2.32 3.41-3.11 3.1.84 6.13 2.67 2.05 4.67 4.57 4.85 8.17a35.65 35.65 0 01-2.51 15.48c-2.39 5.83-6.37 10.12-12.71 11.7a25.41 25.41 0 01-6.15.85c-1.82 0-1.82.08-2.18 1.81-.48 2.34-.9 4.7-1.47 7a16 16 0 01-3.31 7.11 68.67 68.67 0 01-5.8 6.38c-4.09 3.54-8.64 5.66-14.24 4.57-1.17-.23-2.36-.36-3.54-.53-2.63-1.13-5.41-1.92-8-3.2a2.32 2.32 0 00-2.84.57 16.91 16.91 0 01-7.8 4c-2 .55-4 1.05-6 1.65-6.44 2-11.95.2-16.86-4.09a22.21 22.21 0 01-3.48-4c-2.25-3.2-5.31-3.83-8.89-3a6.6 6.6 0 00-1.15.34c-3.72 1.59-7.45 1.33-11.25.23-3.07-.9-6.1-1.88-9.13-2.9-7.94-2.7-12.68-8.39-15.09-16.16-2.11-6.8-3.08-13.73-.9-20.75.33-1.06.25-1.69-1-1.76-.56 0-1.1-.26-1.65-.31-7.4-.78-13.09-4.78-18.26-9.73-4.53-4.32-5.81-9.53-4.33-15.55a29.27 29.27 0 014.42-10.29 1.58 1.58 0 00.45-1.25l-2.48-1a7.92 7.92 0 01-5.08-7.7 17.76 17.76 0 012.1-8.05c.72-1.51 1.66-2.91 2.48-4.37a4.82 4.82 0 001.08-2.45 6.39 6.39 0 00-2.73-.52c-8.11-.53-13.23-4.95-15-12.93a23 23 0 01-.31-7.63 35.3 35.3 0 015.77-16.58 143.15 143.15 0 019.36-12.15 31.07 31.07 0 018.59-6.83l2.52-1.4a2.21 2.21 0 00-.18-.75c-3.28-4-4.05-8.58-3.16-13.55A52.65 52.65 0 01169 288.13a25.26 25.26 0 0113.57-7.63c4.15-.86 6.49-3.46 7.89-7.18a28.11 28.11 0 0110.31-13.5c2.94-2.07 5.81-4.24 8.68-6.41a28.65 28.65 0 019.8-4.89c8.47-2.35 17-4.63 25.54-6.5a51.08 51.08 0 018.79-1.13 31.28 31.28 0 006.18-.68 5.89 5.89 0 011.67-.17c5.7.32 11.29-.75 16.93-1.2a56.43 56.43 0 0112.65.92 46.56 46.56 0 0110.86 2.88 24.51 24.51 0 005.75 1.63c5.92.85 11.39 3.11 16.88 5.29a20.8 20.8 0 019.5 7.54 61.34 61.34 0 017 12c.87 2.13 2.31 4 2.72 6.36a15.7 15.7 0 01-.08 6.89.59.59 0 00-.26.93z" transform="translate(-132.44 -116.28)" />
    <path fill="#9a574a" d="M264.4 497.77c1.18.17 2.37.3 3.54.53 5.6 1.09 10.15-1 14.24-4.57a68.67 68.67 0 005.8-6.38 16 16 0 003.31-7.11c.57-2.32 1-4.68 1.47-7 .36-1.73.36-1.81 2.18-1.81a25.41 25.41 0 006.15-.85c6.34-1.58 10.32-5.87 12.71-11.7a35.65 35.65 0 002.51-15.48c-.18-3.6-2.18-6.12-4.85-8.17-3.95-3-3.16-2.72-.84-6.13a31.54 31.54 0 014.18-4.93c4.65-4.52 7-10.2 8.15-16.47.82-4.53-1.26-7.88-4.63-10.62a25.27 25.27 0 01-5-5.09c-1.24-1.82-1.18-2.45.24-4a18.58 18.58 0 015.63-4.4 9.78 9.78 0 005.16-12.25 12.19 12.19 0 01-.61-2.32c-.51-2.81-.54-5.51 1.44-7.94 2.12-2.59 4-5.4 6.13-8a31.08 31.08 0 004.61-7.24 3.31 3.31 0 012-1.82c1.73-.75 3.26-2 5-2.78 4.46-2.07 9.06-3 14-1.9.85.19 1.73.25 2.6.38.8 3.2.73 6.5.93 9.76a55.36 55.36 0 01.27 7.4 4 4 0 00.37 1.63 28.61 28.61 0 006.55 10.73 18.46 18.46 0 016.07 12.17c.33 4.82-1.46 7.48-5.05 9.17a3.06 3.06 0 01-.92.14 1.27 1.27 0 00-.88-1.27 6.18 6.18 0 00-4.94.93 3 3 0 00-1.33 3.07 4.88 4.88 0 00-3.15 3.22 41.79 41.79 0 00-2.42 7.42 98.59 98.59 0 01-3.31 12.14c-1.1-.22-2.2-.41-3.28-.66a4.48 4.48 0 00-1.64-.18c-3.79.43-7.6.53-11.37 1.23a53.55 53.55 0 00-7.41 1.86c-1.08.37-1.21.93-.54 1.76 1.16 1.44 1.9 3.14 2.93 4.65 1.17 1.7 1.89 3.66 3.43 5.16a41.5 41.5 0 009.47 6.76c-2 3.92-3.92 7.85-5.92 11.74a19.09 19.09 0 00-1.37 3.31 36.54 36.54 0 01-5.66 11.14c-2.66 3.66-6.13 5.36-10.77 4.74-2.46-.33-4.85-.91-7.27-1.42-2.14-.44-2.4-.24-2.24 2a27.4 27.4 0 003.93 12.86 55.37 55.37 0 006.86 8.9c1.93 2 1.78 3.56-.42 5.18a7.15 7.15 0 01-3.71 1.5 18.93 18.93 0 00-5.78 1.48 19.75 19.75 0 01-7.25 1.32c-6.56.17-13.05 1.07-19.55 1.8-4.6.53-9.2 1.1-13.8 1.65h-.47c-4.49.3-5.58-.74-5.48-5.24zm80.07-144c2.59.53 5.35-.61 8.12-1.63a25.12 25.12 0 003.64-1.8 2.09 2.09 0 10-1.8-3.74 10.56 10.56 0 00-1.06.54c-4.19 2.12-8.49 3.68-13.29 2.48a1.8 1.8 0 00-1.67 3 2.77 2.77 0 002.23 1.18c1.12-.02 2.24 0 3.83 0zM358.63 332.64a20.91 20.91 0 00-7.36-.12c-2.28.33-4.59.43-6.86.94s-3.93 1.29-5.09 3.23c-.11.18-.36.27-.58.43.33-6.71 0-13.35.16-20a8.41 8.41 0 011.48-4 26.53 26.53 0 003.8-13.19 10.83 10.83 0 00-.89-4.43c-.4-.95-.77-1.93-1.1-2.91a9.05 9.05 0 011.31-8.38 44.59 44.59 0 017.77 13.88 131.44 131.44 0 016.29 27.7c.28 2.3.71 4.57 1.07 6.85z" transform="translate(-132.44 -116.28)" />
    <path fill="#7b4249" d="M344.47 353.8h-3.83a2.77 2.77 0 01-2.23-1.18 1.8 1.8 0 011.67-3c4.8 1.2 9.1-.36 13.29-2.48a10.56 10.56 0 011.06-.54 2.09 2.09 0 111.8 3.74 25.12 25.12 0 01-3.64 1.8c-2.77 1.05-5.53 2.19-8.12 1.66z" transform="translate(-132.44 -116.28)" />
    <path id="lips" fill="#8c2d49" d="M343.19 436.82a41.5 41.5 0 01-9.47-6.76c-1.54-1.5-2.26-3.46-3.43-5.16-1-1.51-1.77-3.21-2.93-4.65-.67-.83-.54-1.39.54-1.76a53.55 53.55 0 017.41-1.86c3.77-.7 7.58-.8 11.37-1.23a4.48 4.48 0 011.64.18c1.08.25 2.18.44 3.28.66 1.6 1.42 2.88 2.93 2.19 5.34a4.69 4.69 0 01-1.81 2.69c-1.1.78-2.21 1.53-3.31 2.28.07 1 .92 1.29 1.43 1.85 2.81 3.09 2.22 5.52-1.62 7.48a5.26 5.26 0 01-2.77.53 2 2 0 00-1.53.13z" transform="translate(-132.44 -116.28)" />
    <path fill="#7b4249" d="M360.48 393.46a3 3 0 011.33-3.07 6.18 6.18 0 014.94-.93 1.27 1.27 0 01.88 1.27 20.87 20.87 0 01-7.15 2.73z" transform="translate(-132.44 -116.28)" />
    <g id="hearts" fill="#8c2d49">
      <path id="heart-5" d="M429.09 163.15c-.1 12-2.67 23.45-6.67 34.67-4.53 12.74-10.46 24.8-18.89 35.39C398.94 239 394.12 244.7 388 249c-1.95 1.38-3.83 1.26-5.89.82a4.59 4.59 0 01-1.11-.44c-7.28-3.7-14.46-7.55-20.21-13.54-6.81-7.1-14-13.78-20.37-21.34a76.095 76.095 0 01-3.81-4.93c-3-4.23-6-8.5-8.79-12.86-5.15-8.06-8.39-16.86-8.46-26.61a31.35 31.35 0 013.47-14.79 16 16 0 0110.92-8.65 29.44 29.44 0 0123.84 4.11 111.29 111.29 0 0110.57 7.47c1.42 1.18 1.49 1.15 2.59-.34A96.05 96.05 0 01382 144.88c5.24-5 11-9.33 17.89-11.77a22.09 22.09 0 0112-1.12 18.15 18.15 0 0111.79 8.37 35 35 0 014.87 14.18 53.84 53.84 0 01.54 8.61z" transform="translate(-132.44 -116.28)" />
      <path id="heart-4" d="M434 441.79a38.73 38.73 0 013.09-6.8 13.67 13.67 0 019.63-6.49 13.19 13.19 0 0113.68 6.71 18 18 0 012.17 9.22c-.23 5.6-.41 11.21-2.48 16.51a109 109 0 01-7.58 16 124.42 124.42 0 00-5.88 11c-.17.37-.35.72-.54 1.07-2.1 4-4.18 4.36-7.82 1.61a74.35 74.35 0 00-10.59-6.55A27.49 27.49 0 01415.2 471c-2.15-4.56-4.36-9.11-4.95-14.19a21.05 21.05 0 013.13-13.81c2.28-3.67 6.16-4.59 10.29-4.12a27.16 27.16 0 0110.33 2.91z" transform="translate(-132.44 -116.28)" />
      <path id="heart-3" d="M252.21 203.65c.28-1.33.46-2.35.7-3.35a9 9 0 013-4.78 6.66 6.66 0 016.45-1.55 11.37 11.37 0 018.9 11.07 38.34 38.34 0 01-1.26 11.62c-.82 2.83-1.42 5.73-2.14 8.6a14 14 0 01-1.52 3.77c-1.44 2.43-3.24 3.14-5.87 2.14a31.75 31.75 0 01-4.76-2.23c-3.24-1.91-6.58-3.63-9.88-5.41a41.7 41.7 0 01-8.91-6c-2.4-2.26-3.22-6.64-1.91-10 1.49-3.8 4.07-5.64 8-5.72a19.91 19.91 0 017 1.15l2.2.69z" transform="translate(-132.44 -116.28)" />
      <path id="heart-2" d="M627.19 419.64a8.13 8.13 0 01-.37 2.79c-.82 2.75-1.61 5.51-2.31 8.3-.27 1.06-.71 1.62-1.79 1.2-5.76-2.22-12-2.64-17.75-4.86a16.39 16.39 0 01-6.12-3.62c-1.75-1.82-2.5-3.85-1.3-6.3.46-.93.78-1.93 1.28-2.83 2-3.52 5.22-4.82 9.07-4.55 1.37.09 2-.15 2.37-1.51a5.5 5.5 0 013.81-3.69 10.35 10.35 0 016.57-.41 6.29 6.29 0 014.57 4.41 48.63 48.63 0 011.97 11.07z" transform="translate(-132.44 -116.28)" />
      <path id="heart-1" d="M369.15 470.68A9.75 9.75 0 01368 476c-1.57 2.79-2.06 5.85-2.74 8.88-.21.93-.39 1.88-.66 2.8a3 3 0 01-2.6 2.52 3.13 3.13 0 01-3.38-1.74 34.49 34.49 0 00-3-4.87 34 34 0 00-10.26-9.22c-2.89-1.62-3.31-4.69-1-7.31a7.9 7.9 0 018.41-2.72 10.41 10.41 0 012 .74 1.14 1.14 0 001.75-.59 9.6 9.6 0 011.9-2.45 6.59 6.59 0 017.56-1.05 4.7 4.7 0 012.7 3.73c.18 1.98.32 3.97.47 5.96z" transform="translate(-132.44 -116.28)" />
    </g>
    <g id="_indigitalcolor" fill="#8c2d49" data-name="@indigitalcolor">
      <path d="M494.52 479c.86-.59.8-1.11.5-1.65a4.77 4.77 0 00-3.76-2.63 4.54 4.54 0 00-4.62 1.89 10 10 0 00-1.47 8c.59 2.48 1.72 3.54 4.33 3.66a49.........完整代码请登录后点击上方下载按钮下载查看