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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看