gsap+MotionPathPlugin实现彩色圆点路径动画效果代码

代码语言:html

所属分类:动画

代码描述:gsap+MotionPathPlugin实现彩色圆点路径动画效果代码

代码标签: gsap MotionPathPlugin 彩色 圆点 路径 动画

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

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

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

  
  
<style>
body {
  background: #1d1d1d;
}

.demo {
  opacity: 0;
}

.demo svg {
  overflow: visible;
}
</style>


  
  
</head>

<body>
  <div class="demo">
	<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
  <defs></defs>
  <path style="fill: none; stroke-width: 5px; stroke: rgb(144, 141, 141);" d="M 351.8083 69.1945 C 422.1606 69.1945 452.1813 152.7418 426.3861 219.5199 C 405.0252 274.8184 337.3086 293.2454 291.7926 256.1453 C 257.7861 228.4267 237.5661 185.2092 174.1128 219.11 C 112.7792 251.8783 41.8145 190.9837 58.0919 122.3275 C 62.0722 105.5392 70.6161 90.238 82.741 78.1835 C 124.6481 36.5197 192.571 40.5485 229.4636 86.8863 C 257.1423 121.7631 305.7904 70.9843 351.8083 69.1945 Z" class="myPath"></path>
</svg>
</div>
<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/MotionPathPlugin.min.js"></script>
      <script  >
g.........完整代码请登录后点击上方下载按钮下载查看

网友评论0