gsap实现水泡飘动效果-html代码-BFW代码库

gsap实现水泡飘动效果

代码语言：html

所属分类：粒子

代码描述：gsap实现水泡飘动效果

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

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

<style>
* {
  position:absolute;
}

html, body, #container {
  overflow:hidden;
  background:#000;
  width:100%;
  height:100%;
}
</style>

</head>
<body translate="no">
<canvas id="c"></canvas>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script><script >
var n = 200,
    speed = 0.05,
    wind = 15,
    windVariance = 25, // 1 = no variance
    trail = true; 

// ...not these
var c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = (c.width = window.innerWidth),
    ch = (c.height = window.innerHeight),
    img = new Image(100,100),
    img2 = new Image(100,100),
    img3 = new Image(100,100),
    mouseProps = {x:cw/2, down:1},
    particles = [],
    Particle = function(index) {
      this.img = [img,img2,img3][index%3];      
      this.x = this.y = this.progress = this.alpha = 1;
      this.size = 12 + 75*((index+1)/n); //min size+
      if (index>n*0.97) this.size*=3; //make a few big foreground particles
      
      this.dur = .........完整代码请登录后点击上方下载按钮下载查看