snap实现线条变幻动画效果-html代码-BFW代码库

snap实现线条变幻动画效果

代码语言：html

所属分类：动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Chathura&display=swap");
html {
  --main-bg-color: #070707;
  --font: 'Chathura', sans-serif;
}

body {
  font-size: 14px;
  font-family: var(--font);
}

#wrapper {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-color: var(--main-bg-color);
}

#svg-container {
  width: 340px;
}

.inner-container {
  position: relative;
}
</style>

</head>
<body translate="no">
<div id="wrapper">
<div class="inner-container">
<svg id="svg-container">
</svg>
</div>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/snap.svg-min.js"></script>
<script >

console.clear();

const config = {
  duration: 1000,
  delay: 200
}

const paths = [
  'm 90.00301,51.100588 -10.056012,-0.08226 v 0 l -3.301125,-2.795585 -2.304999,-0.490386 v 0 l -2.405473,-2.005696 1.051786,1.5875 -2.198787,-3.704167 v 2.116667 l -2.375529,-7.408333 v 0 l -6.339337,10.583333 5.840669,2.116667 v 0 h -2.354671 v 0 l -3.671445,-2.116667 v 0 l -3.730732,-2.67387 v 0 l 0.722462,0.557204 -2.394485,-2.116667 v 0 L 54.71486,42.523625 v 0 l 1.066474,1.186596 -3.628281,-3.804393 v 0 l -2.003385,-1.910842 v 0 l -1.714921,-1.793325 1.01135,5.291667 -1.064161,-5.291667 -1.946907,-5.820833 v 0 l -0.700806,-1.5875 -1.543888,-3.175 v 0 l -2.033592,3.987649 v 0 l -3.79216,19.824851 5.507618,-23.283333 v 0 l -3.639987,7.422508 v 0 l 0.95823,-2.163915 -3.755764,10.08724 v 0 l -3.62471,7.9375 v 0 l 0.990173,-2.........完整代码请登录后点击上方下载按钮下载查看