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

svg实现空气的爱心动画效果代码

代码语言：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..........完整代码请登录后点击上方下载按钮下载查看