gsap+svg实现蝴蝶加载器动画效果代码-html代码-BFW代码库

gsap+svg实现蝴蝶加载器动画效果代码

代码语言：html

代码描述：gsap+svg实现蝴蝶加载器动画效果代码

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

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

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

  
  
  
  
<style>
body {
 background-color: #E3E3E3;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}
</style>


  
  
</head>

<body >
  <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
    <g id="whole" >
      <path class="mainPath" d="m279.43,178.39c23.18-22.73,63.16-19.12,81.5.5,23.5,25.14,35.16,71.38,35.5,119,.3,42.38-6.61,88.34-30.5,117.5-22.84,27.88-68.34,27.88-90.5-1-20.34-26.51-15.04-56.02-2-74,23.66-32.62,76.5-37,120.5-43,44-6,99.55-12.8,123-33,29.16-25.12,23.91-68.32,5-86-18.84-17.62-52.34-24.12-81.5,0-24.46,20.24-44.84,72.88-43.52,119.67,1.2,42.2,15.17,93.21,34.52,116.33,22.86,27.33,60.16,28.88,82.5,12,30.98-23.41,30.18-63.63,9-85-31.34-31.62-83-42-129-44-46-2-82.92-8.53-111.5-33-25.84-22.12-26.84-62.62-3-86Z" fill="none" stroke="#d1313e" stroke-width="50"/>
      <path class="mainPath" d="m279.43,178.39c23.18-22.73,63.16-19.12,81.5.5,23.5,25.14,35.16,71.38,35.5,119,.3,42.38-6.61,88.34-30.5,117.5-22.84,27.88-68.34,27.88-90.5-1-20.34-26.51-15.04-56.02-2-74,23.66-32.62,76.5-37,120.5-43,44-6,99.55-12.8,123-33,29.16-25.12,23.91-68.32,5-86-18.84-17.62-52.34-24.12-81.5,0-24.46,20.24-44.84,72.88-43.52,119.67,1.2,42.2,15.17,93.21,34.52,116.33,22.86,27.33,60.16,28.88,82.5,12,30.98-23.41,30.18-63.63,9-85-31.34-31.62-83-42-129-44-46-2-82.92-8.53-111.5-33-25.84-22.12-26.84-62.62-3-86Z" fill="none" stroke="#C0C0C0" stroke-width="35"/>
      <path class="mainPath" d="m279.43,178.39c23.18-22.73,63.16-19.12,81.5.5,23.5,25.14,35.16,71.38,35.5,119,.3,42.38-6.61,88.34-30.5,117.5-22.84,27.88-68.34,27.88-90.5-1-20.34-26.51-15.04-56.02-2-74,23.66-32.62,76.5-37,120.5-43,44-6,99.55-12.8,123-33,29.16-25.12,23.91-68.32,5-86-18.84-17.62-52.34-24.12-81.5,0-24.46,20.24-44.84,72.88-43.52,119.67,1.2,.........完整代码请登录后点击上方下载按钮下载查看