gsap+svg实现爱心圈圈波动动画效果代码-html代码-BFW代码库

gsap+svg实现爱心圈圈波动动画效果代码

代码语言：html

所属分类：悬停

代码描述：gsap+svg实现爱心圈圈波动动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
 background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;      
        overflow: hidden;
}

canvas {
        min-height: 100vh;
}

svg {
        width: 0%;
        height: 0%;
}
</style>


</head>

<body>
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" >
  <g id="concentric" stroke-width="9">
  <path d="m259.27,253.82c3.01,0,5.45,2.44,5.45,5.45s-2.44,5.45-5.45,5.45-5.45-2.44-5.45-5.45,2.44-5.45,5.45-5.45Z" />
  <path d="m259.27,241.78c9.66,0,17.49,7.83,17.49,17.49,0,9.66-7.83,17.49-17.49,17.49s-17.49-7.83-17.49-17.49,7.83-17.49,17.49-17.49Z" />
  <path d="m259.27,229.74c16.31,0,29.53,13.22,29.53,29.53,0,16.31-13.22,29.53-29.53,29.53-16.31,0-29.53-13.22-29.53-29.53s13.22-29.53,29.53-29.53Z" />
  <path d="m259.27,217.7c22.96,0,41.57,18.61,41.57,41.57s-18.61,41.57-41.57,41.57-41.57-18.61-41.57-41.57c0-22.96,18.61-41.57,41.57-41.57Z" />
  <path d="m259.27,205.66c29.61,0,53.61,24,53.61,53.61,0,29.61-24,53.61-53.61,53.61-29.61,0-53.61-24-53.61-53.61s24-53.61,53.61-53.61Z" />
  <path d="m259.27,193.62c36.25,0,65.64,29.39,65.64,65.64s-29.39,65.64-65.64,65.64-65.64-29..........完整代码请登录后点击上方下载按钮下载查看