html 萤火虫特效,html5关在杯子里萤火虫动画特效

特效描述：html5 萤火虫动画特效。html5关在杯子里跟随鼠标摇晃的萤火虫发光动画特效。

代码结构

1. 引入JS

2. HTML代码

var numP = 50;

TweenMax.set("#content", {transformOrigin:"50% -45%"})

//TweenMax.fromTo("#particles", .7, {background:'rgb(16,17,24)'}, {background:'rgb(18,15,23)', repeat:-1, yoyo:true, ease:Elastic.easeInOut})

for (var i = 0; i<=numP; i++) {

if (i==0){

TweenMax.set("#p0", {scale:0})

//loop(document.getElementById('p0'), 0);

}

else {

var _p = document.getElementById('p0').cloneNode(false);

_p.id = "p" + i;

document.getElementById('particles').appendChild(_p);

TweenMax.fromTo(_p, 13, {

x:120+110*Math.random(),

y:200+250*Math.random(),

scale:3*Math.random()

},{

bezier:{ type:'thru', values:[

{x:99+60*Math.random(), y:50+100*Math.random(), scale:.5+Math.random(), alpha:1},

{x:40+80*Math.random(), y:200+160*Math.random(), scale:3-Math.random(), alpha:0.25},

{x:60+60*Math.random(), y:390+50*Math.random(), scale:3*Math.random(), alpha:.7+.3*Math.random()}],

},

onComplete:loop,

onCompleteParams:[_p],

ease:Sine.easeInOut

}).progress(i/numP)

}

function loop(_p){

var tl = new TimelineMax({yoyo:true, repeat:-1})

//.to(_p, 3, {x:100+50*Math.random(), y:380+50*Math.random(), scale:1+2*Math.random(), ease:Linear.easeNone}, 0)

.to(_p, 14, {

ease:Sine.easeInOut,//Linear.easeNone,

bezier:{ type:'thru', values:[

{x:190+30*Math.random(), y:100+60*Math.random(), scale:3-Math.random()},

{x:190+50*Math.random(), y:150+100*Math.random(), scale:.5+Math.random(), alpha:1},

{x:190-60*Math.random(), y:200+160*Math.random(), scale:3-Math.random(), alpha:0.25},

{x:200-70*Math.random(), y:390+50*Math.random(), scale:3*Math.random(), alpha:1}],

}})

window.addEventListener('mousemove',function(e){

TweenMax.to("#content", .5, {x:-400+800*(e.clientX/window.innerWidth), rotation:-25+50*(e.clientX/window.innerWidth)})

})