實例詳解css3編寫瀏覽器漸層背景色的方法-css教學-PHP中文網

首頁

web前端

css教學

實例詳解css3編寫瀏覽器漸層背景色的方法

小云云

Dec 22, 2017 pm 03:21 PM

css3firefoxwebkit

本文主要介紹了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(&#39;wrap&#39;);
        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=&#39;#&#39;+convert(color[0])+&#39;&#39;+convert(color[1])+&#39;&#39;+convert(color[2])+&#39;&#39;;
            colorR=&#39;#&#39;+convert(color[2])+&#39;&#39;+convert(color[0])+&#39;&#39;+convert(color[1])+&#39;&#39;;
                    
                }
                gColor(colorL,colorR);
            }
        
        function convert(sRgb){ /*rgb转换成HEX*/
            var sRgb=sRgb;
            var sHex=sRgb.toString(16);
            sHex=sHex.length<2?&#39;0&#39;+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=&#39;-webkit-linear-gradient(left,&#39;+colorL+&#39;,&#39;+colorR+&#39;)&#39; //谷歌
                oWrap.style.background=&#39;-ms-linear-gradient(left,&#39;+colorL+&#39;,&#39;+colorR+&#39;)&#39;  //ie 10 11
            }
         
        
        }
    })();
        
</script>
</body>
</html>

相關推薦：

CSS3 漸層背景色使用方法相容於IE9+

JS實作進入頁面時漸變背景色的方法_javascript技巧

#css如何讓背景色漸層相容的寫法詳解

以上是實例詳解css3編寫瀏覽器漸層背景色的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

什麼是CSS網格？Apr 30, 2025 pm 03:21 PM

CSS網格是創建複雜，響應式Web佈局的強大工具。它簡化了設計，提高可訪問性並提供了比舊方法更多的控制權。

什麼是CSS Flexbox？Apr 30, 2025 pm 03:20 PM

文章討論了CSS FlexBox，這是一種佈局方法，用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法，將其與CSS網格進行了比較，並詳細瀏覽了瀏覽器支持。

我們如何使用CSS使網站迅速響應？Apr 30, 2025 pm 03:19 PM

本文討論了使用CSS創建響應網站的技術，包括視口元標籤，靈活的網格，流體媒體，媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用，並推薦CSS框架

CSS盒裝屬性有什麼作用？Apr 30, 2025 pm 03:18 PM

本文討論了CSS盒裝屬性，該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box，Border-Box和Padding-Box之類的值，以及它們對佈局設計和形式對齊的影響。

我們如何使用CSS動畫？Apr 30, 2025 pm 03:17 PM

文章討論使用CSS，關鍵屬性並與JavaScript結合創建動畫。主要問題是瀏覽器兼容性。

我們可以使用CSS向我們的項目添加3D轉換嗎？Apr 30, 2025 pm 03:16 PM

文章討論了Web項目的3D轉換，關鍵屬性，瀏覽器兼容性和性能注意事項的討論。（角色計數：159）

我們如何在CSS中添加梯度？Apr 30, 2025 pm 03:15 PM

文章討論了使用CSS梯度（線性，徑向，重複）來增強網站視覺效果，添加深度，焦點和現代美學。

CSS中的偽元素是什麼？Apr 30, 2025 pm 03:14 PM

文章討論了CSS中的偽元素，它們在增強HTML樣式方面的使用以及與偽級的差異。提供實用的例子。

See all articles

熱AI工具

熱工具

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中