看着蛮不错的~~实验原理大概是设定一个定时器，然后给一个ID填充Span，然后通过定时器随机给每一个span填充背景颜色~
下面这段话是大发哥写的~~
一直对动态背景很感兴趣，但是不喜欢那种大图片轮播的背景图，看上去一点档次都没有，天天想着能不用svg或者canvas整出点好玩的东西，试来试去发现现在的主题纯色背景是最好的，于是就把目光瞄在了banner上，还真整出来点好玩的，但是还不想去掉霸气的charger啊，于是就弄了一般，不仔细看发现不了，不要以为那是gif哦，是高端大气上档次的javascript，哈哈。
首先要做一个函数，能让背景不停的变化。
<code>
// RequestAnimFrame Shim:
window.requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(a) {
window.setTimeout(a, 1e3 / 60); //这个是神马~~难道是时间的长短
};
}();
window.requestInterval = function(a, b) {
if (!window.requestAnimationFrame && !window.webkitRequestAnimationFrame && !window.mozRequestAnimationFrame && !window.oRequestAnimationFrame && !window.msRequestAnimationFrame) return window.setInterval(a, b); //这个判断真复杂，看不懂啊
var c = new Date().getTime();
(function d() {
var e = new Date().getTime(), f = e - c;
if (f >= b) {
a.call();
c = new Date().getTime();
}
requestAnimFrame(d);
})();
};</code>
// RequestAnimFrame Shim:
window.requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(a) {
window.setTimeout(a, 1e3 / 60); //这个是神马~~难道是时间的长短
};
}();
window.requestInterval = function(a, b) {
if (!window.requestAnimationFrame && !window.webkitRequestAnimationFrame && !window.mozRequestAnimationFrame && !window.oRequestAnimationFrame && !window.msRequestAnimationFrame) return window.setInterval(a, b); //这个判断真复杂，看不懂啊
var c = new Date().getTime();
(function d() {
var e = new Date().getTime(), f = e - c;
if (f >= b) {
a.call();
c = new Date().getTime();
}
requestAnimFrame(d);
})();
};</code>
然后即使核心函数了，原理是随机背景颜色，下面的#header是你要填充的容器，totalPixels是模块数量，根据自己的需要进行修改。
<code>var animate = {
entrance:function() {
var totalPixels = 36; //来36个span
$("#header").prepend("<div id='pixelbg' />"); //在id=header的标签中加入id="pixelbg"，不过你要对#header增添position:rel
for (var i = 0; i < totalPixels; i++) {
$("#pixelbg").append("<span />");
}
$("#pixelbg span").each(function() {
var colours = [ "#1b1b1b", "#1d1d1d", "#1f1f1f", "#222222", "#2b2b2b", "#2f2f2f", "#333333", "#3d3d3d" ], randcolour = colours[Math.floor(Math.random() * colours.length)];
$(this).css("background-color", randcolour);
});
function anim() {
$("#pixelbg").delay(500).animate({
top:0
}, 250, function() {
requestInterval(animate.sparkle, 2e3);
});
}
$(window).load(function() {
anim();
});
},
sparkle:function() {
$("#pixelbg span").each(function() {
var colours = [ "#1b1b1b", "#1d1d1d", "#1f1f1f", "#222222", "#2b2b2b", "#2f2f2f", "#333333", "#3d3d3d" ], randcolour = colours[Math.floor(Math.random() * colours.length)];
$(this).css({
backgroundColor:randcolour
}, 800);
});
}
};</code>
entrance:function() {
var totalPixels = 36; //来36个span
$("#header").prepend("<div id='pixelbg' />"); //在id=header的标签中加入id="pixelbg"，不过你要对#header增添position:rel
for (var i = 0; i < totalPixels; i++) {
$("#pixelbg").append("<span />");
}
$("#pixelbg span").each(function() {
var colours = [ "#1b1b1b", "#1d1d1d", "#1f1f1f", "#222222", "#2b2b2b", "#2f2f2f", "#333333", "#3d3d3d" ], randcolour = colours[Math.floor(Math.random() * colours.length)];
$(this).css("background-color", randcolour);
});
function anim() {
$("#pixelbg").delay(500).animate({
top:0
}, 250, function() {
requestInterval(animate.sparkle, 2e3);
});
}
$(window).load(function() {
anim();
});
},
sparkle:function() {
$("#pixelbg span").each(function() {
var colours = [ "#1b1b1b", "#1d1d1d", "#1f1f1f", "#222222", "#2b2b2b", "#2f2f2f", "#333333", "#3d3d3d" ], randcolour = colours[Math.floor(Math.random() * colours.length)];
$(this).css({
backgroundColor:randcolour
}, 800);
});
}
};</code>
文档载入时执行函数
<code>$(function() {
animate.entrance();
});</code>
animate.entrance();
});</code>
加上个样式，你可以根据自己的需要进行调成
<code>
/**么么思密达，看懂了**/
#pixelbg {
height: 90px;
left: 0;
overflow: hidden;
position: absolute;
top: -90px;
width: 360px;
/**我在想需不需要一个z-index呢~*/
}
#pixelbg span {
display: block;
float: left;
height: 30px;
transition: all 0.5s ease 0s;
width: 30px;
border-radius:30px
}</code>
/**么么思密达，看懂了**/
#pixelbg {
height: 90px;
left: 0;
overflow: hidden;
position: absolute;
top: -90px;
width: 360px;
/**我在想需不需要一个z-index呢~*/
}
#pixelbg span {
display: block;
float: left;
height: 30px;
transition: all 0.5s ease 0s;
width: 30px;
border-radius:30px
}</code>
么么哒，又是无耻的转载~~内容仅供参考。