gsap+MorphSVGPlugin3+svg实现线条弯曲变形动画效果代码-html代码-BFW代码库

gsap+MorphSVGPlugin3+svg实现线条弯曲变形动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+MorphSVGPlugin3+svg实现线条弯曲变形动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background-color: #152340;
}

svg {
  max-height: 90vh;
  max-width: 90vw;
  margin: 0 auto;
  display: block;
}

path {
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  fill: none;
}
</style>

  

</head>

<body  >
  <svg height="100%" width="100%" viewBox="0 0 600 600">
  <path id="curve" d="M100,300 C200,100 399,99 500,300"></path>
  <path id="curve1" d="M100,300 C200,100 399,99 500,300"></path>
  <path id="curve2" d="M100,300 C700,100 399,99 500,300"></path>
</svg>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin3.min.js"></script>
      <script >
var tl = gsap..........完整代码请登录后点击上方下载按钮下载查看