gsap五颜六色粒子气球喷射形成数字动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：gsap五颜六色粒子气球喷射形成数字动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  background: #fff;
}

.followers {
  position: fixed;
  z-index: 3;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -25%) rotate(-10deg);
          transform: translate(-50%, -25%) rotate(-10deg);
  width: 64vw;
  height: 28vw;
  fill-rule: evenodd;
  fill: none;
  stroke: #ffbd36;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: 1006px;
  stroke-dasharray: 1006px;
}
.followers.stroke {
  stroke: #fff;
  z-index: 2;
  -webkit-transform: translate(-50%, -24%) rotate(-10deg);
          transform: translate(-50%, -24%) rotate(-10deg);
  stroke-width: 10px;
}
.followers.shadow {
  stroke: black;
  z-index: 0;
  opacity: .1;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-transform: translate(-50%, -22%) rotate(-10deg);
          transform: translate(-50%, -22%) rotate(-10deg);
  stroke-width: 8px;
}
</style>



</head>

<body>


<canvas id="canvas"></canvas>


<svg class="followers" viewbox="0 0 227.5 77.5">
<path d="M31.500,5.500 C31.500,5.500 5.530,47.720 5.500,61.500 C5.487,67.492 7.483,69.500 8.500,69.500 C12.692,69.500 20.500,55.116 20.500,43.500 C20.500,38.710 18.819,36.500 16.500,36.500 C14.181,36.500 13.500,43.500 13.500,43.500 C13.500,43.500 13.749,48.500 17.500,48.500 C21.251,48.500 31.330,42.533 37.500,26.500 C41.927,17.000 25.005,48.500 36.500,48.500 C45.629,48.500 49.500,28.500 49.500,28.500 C49.500,28.500 49.373,21.500 43.500,21.500 C37.627,21.500 40.147,34.500 52.500,34.500 C64.853,34.500 76.500,16.551 76.500,11.500 C76.500,8.676 75.840,7.500 74.500,7.500 C73.160,7.500 55.500,26.246 55.500,43.500 C55.500,48.968 60.531,48.500 61.500,48.500 C62.469,48.500 69.160,43.911 75.446,33.132 C80.533,31.048 92.557,18.454 92.500,11.500 C92.474,8.262 92.206,6.500 90.500,6.500 C88.794,6.500 72.500,26.916 72.500,41.500 C72.500,44.828 73.055,48.500 76.500,48.500 C86.329,48.500 93.632,27.346 98.500,24.500 C94.092,24.500 83.826,48.500 94.500,48.500 C104.829,48.500 107.500,27.500 107.500,27.500 C107.500,27.500 106.511,22.500 102.500,22.500 C98.489,22.500 98.868,32.500 109.500,32.500 C120.132,32.500 124.500,22.500 124.500,22.500 C124.500,22.500 115.564,37.816 114.500,41.500 C113.380,45.376 114.402,48.500 117.500,48.500 C120.598,48.500 130.179,38.108 137.500,21.500 C138.300,19.545 120.140,48.500 129.500,48.500 C138.860,48.500 146.536,28.085 148.500,22.500 C150.464,16.915 148.216,36.500 160.500,36.500 C166.569,36.500 169.500,28.900 169.500,27.500 C169.500,24.657 168.964,21.500 165.500,21.500 C163.258,21.500 151.500,26.055 151.500,40.500 C151.500,44.956 154.251,48.500 157.500,48.500 C160.749,48.500 169.521,51.205 181.500,20.500 C183.001,14.884 174.178,25.500 181.500,25.500 C188.822,25.500 192.500,23.500 192.500,23.500 C192.500,23.500 182.500,34.044 182.500,43.500 C182.500,46.287 184.397,48.500 186.500,48.500 C191.045,48.500 194.067,43.236 199.500,36.500 C203.899,31.046 208.320,23.415 210.500,19.500 C214.295,16.284 204.932,26.952 208.228,33.456 C211.893,40.687 210.994,48.496 204.500,48.500 C198.075,48.504 194.999,38.481 196.500,34.500 C197.474,34.516 191.394,48.366 207.500,48.500 C215.066,48.563 219.500,38.500 219.500,38.500 "/>
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
      <script >
/*--------------------
Settings
--------------------*/
const palette = [
'#21272f',
'#ffbd36',
'#ff2629',
'#00abe5'];


/*--------------------
            Svg
            --------------------*/
const $svg = document.querySelector(.........完整代码请登录后点击上方下载按钮下载查看