CSS3 implementing the browser background gradient method code

This article mainly introduces and introduces the method of CSS3 to write the background gradient of the browser background, we will share with you the code of this color fading background implementation, hoping to help everyone.

The effect is as follows:

Knowledge points: RGB panchromatic loop algorithm, hex and RGB color conversion algorithm, CSS3 color gradient, CSS3 gradient compatible IE method, timer and loop, function encapsulation, array application, etc.

CSS code:

  <style>    *{margin:0;padding:0;}    body#wrap{width:100%;height:500px;}  </style>

JavaScript code:

    <script> (function () {var Owrap=document.getelementbyid (' Wrap ');  var max=220;      /* Store Sealed value */var min=180; /* Store Valley Value */var color=[max,min,min];            /* Initialize array */var timer=null according to the initial value red;            var length=color.length;            var Colorl,colorr timer=setinterval (change,20);                /* Do not allow to modify the code directly in the unit operation */function change () {/* Executes the code once every 20 milliseconds in the timer */* Check array once */                   for (Var i=0;i<length;i++) {i%=length;                   var arrx= (i+1)%length;                    var arry= (i+2)%length;                    if (color[i]==max&&color[arrx]==min) {color[arry]++;                    } if (color[i]== Min&&color[arrx]==max) {color[arry]--;                } colorl= ' # ' +convert (color[0]) + ' +convert (color[1]) + ' +convert (color[2]) + '; Colorr= ' # ' +coNvert (color[2]) + ' +convert (color[0]) + ' +convert (color[1]) + ';                } gcolor (Colorl,colorr);                } function Convert (SRGB) {/*rgb converted to hex*/var Srgb=srgb;                var shex=srgb.tostring (16); Shex=shex.length<2? ' 0 ' +shex:shex/* Three mesh judging condition?            Eligible: Non-conforming condition */return ShEx; } function Gcolor (Colorl,colorr) {if (Navigator.userAgent.match (/trident/i) &&navigator.us Eragent.match (/msie [7|8| 9].0/i)) {//Through regular detection browser information is IE and IE version is not 7 or 8 or 9 one oWrap.style.filter = "Progid:dxim                AgeTransform.Microsoft.gradient (startcolorstr= "+ Colorl +", endcolorstr= "+ Colorr +", gradienttype=0) ";                    }else{owrap.style.background= '-webkit-linear-gradient (left, ' +colorl+ ', ' +colorr+ ') '//Google Owrap.style.background= '-ms-linear-gradient (Left, ' +colorl+ ', ' +colorr+ ') '//ie 10 11}}); </script>