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

代码语言:html

所属分类:悬停

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

代码标签: 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.39-65.64-65.64,29.39-65.64,65.64-65.64Z" />
  <path d="m259.27,181.59c42.9,0,77.68,34.78,77.68,77.68,0,42.9-34.78,77.68-77.68,77.68s-77.68-34.78-77.68-77.68c0-42.9,34.78-77.68,77.68-77.68Z" />
  <path d="m259.27,169.55c49.55,0,89.72,40.17,89.72,89.72,0,49.55-40.17,89.72-89.72,89.72-49.55,0-89.72-40.17-89.72-89.72,0-49.55,40.17-89.72,89.72-89.72Z" />
  <path d="m259.27,157.51c56.2,0,101.76,45.56,101.76,101.76s-45.56,101.76-101.76,101.76-101.76-45.56-101.76-101.76,45.56-101.76,101.76-101.76Z" />
  <path d="m259.27,145.47c62.85,0,113.8,50.95,113.8,113.8,0,62.85-50.95,113.8-113.8,113.8-62.85,0-113.8-50.95-113.8-113.8,0-62.85,50.95-113.8,113.8-113.8Z" />
  <path d="m259.27,133.43c69.5,0,125.84,56.34,125.84,125.84s-56.34,125.84-125.84,125.84c-69.5,0-125.84-56.34-125.84-125.84,0-69.5,56.34-125.84,125.84-125.84Z" />
  <path d="m259.27,121.39c76.15,0,137.88,61.73,137.88,137.88,0,76.15-61.73,137.88-137.88,137.88-76.15,0-137.88-61.73-137.88-137.88s61.73-137.88,137.88-137.88Z" />
  <path d="m259.27,109.35c82.8,0,149.92,67.12,149.92,149.92s-67.12,149.92-149.92,149.92-149.92-67.12-149.92-149.92,67.12-149.92,149.92-149.92Z" />
  <path d="m259.27,97.31c89.45,0,161.96,72.51,161.96,161.96,0,89.45-72.51,161.96-161.96,161.96-89.45,0-161.96-72.51-161.96-161.96,0-89.45,72.51-161.96,161.96-161.96Z" />
  <path d="m259.27,85.27c96.1,0,174,77.9,174,174s-77.9,174-174,174-174-77.9-174-174c0-96.1,77.9-174,174-174Z" />
  <path d="m259.27,73.23c102.74,0,186.03,83.29,186.03,186.03,0,102.74-83.29,186.03-186.03,186.03-102.74,0-186.03-83.29-186.03-186.03s83.29-186.03,186.03-186.03Z" />
  <path d="m259.27,61.2c109.39,0,198.07,88.68,198.07,198.07s-88.68,198.07-198.07,198.07c-109.39,0-198.07-88.68-198.07-198.07,0-109.39,88.68-198.07,198.07-198.07Z" />
  <path d="m259.27,49.16c116.04,0,210.11,94.07,210.11,210.11s-94.07,210.11-210.11,210.11S49.16,375.31,49.16,259.27c0-116.04,94.07-210.11,210.11-210.11Z" />
  <path d="m259.27,37.12c122.69,0,222.15,99.46,222.15,222.15,0,122.69-99.46,222.15-222.15,222.15-122.69,0-222.15-99.46-222.15-222.15S136.58,37.12,259.27,37.12Z" />
  <path d="m259.27,25.08c129.34,0,234.19,104.85,234.19,234.19s-104.85,234.19-234.19,234.19S25.08,388.61,25.08,259.27,129.93,25.08,259.27,25.08Z" />
  <path d="m259.27,13.04c135.99,0,246.23,110.24,246.23,246.23,0,135.99-110.24,246.23-246.23,246.23S13.04,395.26,13.04,259.27c0-135.99,110.24-246.23,246.23-246.23Z" />
  <path d="m259.27,1c142.64,0,258.27,115.63,258.27,258.27,0,142.64-115.63,258.27-258.27,258.27S1,401.91,1,259.27,116.63,1,259.27,1Z" />
	</g>
</svg>
<canvas id="canvas".........完整代码请登录后点击上方下载按钮下载查看

网友评论0