html代码特效粒子,html5彩色方块粒子动画效果代码

特效描述：html5 彩色方块 粒子动画效果。粒子动画

代码结构

1. HTML代码

var df = document.createDocumentFragment();

var container = document.getElementById('container');

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

var x = i % 30;

var y = ~~ (i / 30);

var elm = document.createElement('div');

elm.className = 'box';

elm.style.top = (y * 10) + 'px';

elm.style.left = (x * 10) + 'px';

elm.style.backgroundColor = color(x%y+y%x);

df.appendChild(elm);

}

container.appendChild(df);

var cycle = 0;

var children = container.children;

run();

function run() {

requestAnimationFrame(run);

for (var i = 0, l = children.length; i < l; i++) {

var top = parseFloat(children[i].style.top);

var left = parseFloat(children[i].style.left);

children[i].style.top = top + Math.cos(cycle + (i % 30)) + 'px';

children[i].style.left = left + Math.sin(cycle + ~~ (i / 30)) + 'px';

cycle += 1e-4;

}

}

function color(i) {

var r = Math.floor( Math.sin(i) * 127 + 128 );

var g = Math.floor( Math.sin(i + 2) * 127 + 128 );

var b = Math.floor( Math.sin(i + 3) * 127 + 128 );

return 'rgb(' + r + ', ' + g + ',' + b + ')';

}