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.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".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0