執行個體詳解css3編寫瀏覽器漸層背景色的方法

最後更新：2017-12-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文主要介紹了css3編寫瀏覽器背景漸層背景色的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

效果如下：

知識點：rgb全色迴圈演算法，HEX與RGB色彩轉換演算法、CSS3色彩坡形，CSS3漸層色相容ie方法，定時器與迴圈，函數封裝,數組應用等。

源碼：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style>*{margin:0;padding:0;}body#wrap{width:100%;height:500px;}</style></head><body id="wrap"><script>    /* RGB 色盤變化          //  1.rgb顏色的變化只有 ++ -- ；          //  2.什麼時候發生改變          //  3.閾值和變化規律：            {                 if(R==255&&G==0){B++;}                 if(B==255&&G==0){R--;}                 if(B==255&&R==0){G++;}                 if(R==0&&G==255){B--;}                 if(G==255&&B==0){R++;}                 if(R==255&&B==0){G--;}            }        //    4.資料分析歸類            {                     if(G==255&&B==0){R++;}                 if(B==255&&R==0){G++;}                 if(R==255&&G==0){B++;}                                  if(G==0&&B==255){R--;}                 if(B==0&&R==255){G--;}                 if(R==0&&G==255){B--;}             }         //   5.解決方案轉化成代碼            {                R , G , B                var color=[R,G,B]`               color[0]  //R                利用數組操作原本應該是3個變數的值                ++ , --            }    */    (function(){        var oWrap=document.getElementById('wrap');        var max=220;  /*儲存封值*/        var min=180;      /*儲存穀值*/        var color=[max,min,min]; /*根據初始值紅色來初始化數組*/        var timer=null;        var length=color.length;        var colorL,colorR        timer=setInterval(change,20);        /*不容許在機組運行中直接修改代碼*/        function change(){            /*在定時器中每過20毫秒 執行一次代碼*/            /*檢測一次數組*/            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轉換成HEX*/            var sRgb=sRgb;            var sHex=sRgb.toString(16);            sHex=sHex.length<2?'0'+sHex:sHex             /* 三目判斷  判斷條件 ？ 符合條件 ：不符合條件*/            return sHex;        }        function gColor(colorL,colorR){            if(navigator.userAgent.match(/Trident/i)&&navigator.userAgent.match(/MSIE [7|8|9].0/i)){                //通過正則檢測瀏覽器資訊是否是ie 並且 ie版本是不是 7或者8或者9 之一                oWrap.style.filter = "progid:DXImageTransform.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></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More