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 = .........完整代码请登录后点击上方下载按钮下载查看
网友评论0