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.116667 -2.659262,-3.175 v 0 l -1.991548,3.175 v 0 l -2.754564,-4.7625 v 0 l -1.271217,1.5875 0.945617,-1.270945 -1.464921,8.150112 v -6.35 l -1.688619,4.233333 -0.728291,-6.879166 v 0 l -2.135269,3.704166 v 0 l -2.754984,4.7625 3.675155,-6.35 -3.900949,6.879167 v 0 h -3.500309 l 1.042481,-3.175 -1.962431,3.175 v 0 L 0,51.100618',
  'm 90.00301,51.100588 -10.056012,0.03342 v 0 l -3.301125,-7.345712 -2.304999,5.090001 v 0 l -2.405473,-5.075523 h 1.051786 L 70.7884,39.094655 v 0 L 68.412871,34.00809 v 0 l -6.339337,13.591208 h 5.840669 v 0 l -2.354671,-5.138166 v 0 L 61.888087,34.44961 v 0 l -3.730732,8.676027 v 0 h 0.722462 l -2.394485,4.902634 v 0 L 54.71486,44.52022 v 0 h 1.066474 l -3.628281,-7.964636 v 0 l -2.003385,4.291263 v 0 l -1.714921,3.673373 h 1.01135 l -1.064161,2.348216 -1.946907,-4.012894 v 0 l -0.700806,-1.444476 -1.543888,3.200319 v 0 l -2.033592,-4.442527 v 0 l .........完整代码请登录后点击上方下载按钮下载查看