svg实现爱心路径运动动画效果代码-html代码-BFW代码库

svg实现爱心路径运动动画效果代码

代码语言：html

所属分类：表白

代码描述：svg实现爱心路径运动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">

  
  
<style>
html { background: #222; height: 100%; }
body { min-height: 100%; display: flex; justify-content: space-between; }
svg { display: block; margin: auto; max-width: 500px; width: 90%; max-height: 90vh; }

.gradient-path { 
  fill: none; /* No fill so we're just enjoying the stroke */
  stroke-width: 2; /* Make the stroke a bit wider so we can see it better */
  stroke-linecap: round; /* Make the stroke edges nice & round */
  stroke-linejoin: round; /* Smooth out corners */
  
  --total-offset: 0; /* CSS var that will be populated by the JS for the CSS animation */
  -webkit-animation: stroke-anim 6s linear infinite;
          animation: stroke-anim 6s linear infinite;
}

/* Go from the current `stroke-dashoffset` (set in the JS), to the total offset (provided by the JS in the CSS var */
@-webkit-keyframes stroke-anim {
  to { stroke-dashoffset: var(--total-offset); }
}
@keyframes stroke-anim {
  to { stroke-dashoffset: var(--total-offset); }
}
</style>


</head>

<body >
  <!-- <svg id="icon-star" width="32" viewBox="-1 0 34 32">
<title>star</title>
<path class="gradient-path" d="M16 23l9 6-4-10 9-6h-10l-4-10-4 10h-10l9 6-4 10 9-6z"></path>
</svg> -->
<svg id="icon-heart" width="32" viewBox="-2 -2 32 32">
<title>heart</title>
<path class="gradient-path" d="M14 26c-0.25 0-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.37.........完整代码请登录后点击上方下载按钮下载查看