html页面渐变背景,HTML5 渐变背景

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// Header

$('.hdr').height( $(window).height() );

$(window).resize(function(){

$('.hdr').height( $(window).height() );

});

var colors = new Array(

[231,76,60],

[230,126,34],

[241,196,15],

[46,204,113],

[26,188,156],

[52,152,219],

[155,89,182]);

var step = 0,

colorIndices = [0,1,2,3],

gradientSpeed = 0.002;

function updateGradient()

{

var c0_0 = colors[colorIndices[0]];

var c0_1 = colors[colorIndices[1]];

var c1_0 = colors[colorIndices[2]];

var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;

var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);

var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);

var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);

var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16);

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);

var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);

var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);

var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16);

$('.hdr').css({

'background': ''+color1+'',

'background': '-moz-linear-gradient(top, '+color1+' 0%, '+color2+' 100%)',

'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+color1+'), color-stop(100%,'+color2+'))',

'background': '-webkit-linear-gradient(top, '+color1+' 0%, '+color2+' 100%)',

'background': '-o-linear-gradient(top, '+color1+' 0%, '+color2+' 100%)',

'background': '-ms-linear-gradient(top, '+color1+' 0%, '+color2+' 100%)',

'background': 'linear-gradient(to bottom, '+color1+' 0%, '+color2+' 100%)',

'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr='+color1+', endColorstr='+color2+',GradientType=0 )'});

step += gradientSpeed;

if ( step >= 1 )

{

step %= 1;

colorIndices[0] = colorIndices[1];

colorIndices[2] = colorIndices[3];

//pick two new target color indices

//do not pick the same as the current one

colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

}

}

setInterval(updateGradient,100);