Heim > Artikel > Web-Frontend > Detailliertes Beispiel für das Schreiben einer Browser-Hintergrundfarbe mit Farbverlauf mithilfe von CSS3

Detailliertes Beispiel für das Schreiben einer Browser-Hintergrundfarbe mit Farbverlauf mithilfe von CSS3

小云云Original: 2017-12-22 15:21:041659Durchsuche

In diesem Artikel wird hauptsächlich die Methode zum Schreiben von Hintergrundfarben mit Farbverlauf für Browser in CSS3 vorgestellt. Jetzt werde ich sie mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Der Effekt ist wie folgt:

Wissenspunkte: RGB-Vollfarbzyklusalgorithmus, HEX- und RGB-Farbkonvertierungsalgorithmus, CSS3-Farbverlauf, CSS3-Verlaufsfarbe kompatibel, z. B. Methode, Timer und Schleifen, Funktionskapselung, Array-Anwendungen usw.

Quellcode:

<!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>

Verwandte Empfehlungen:

Die Verwendungsmethode für die Hintergrundfarbe mit Farbverlauf von CSS3 ist kompatibel mit IE9+

JS-Methode zum Erzielen eines Hintergrundfarbverlaufs bei Eingabe der page_javascript-Fähigkeiten

Detaillierte Erklärung, wie der Hintergrundfarbverlauf kompatibel gemacht wird css

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für das Schreiben einer Browser-Hintergrundfarbe mit Farbverlauf mithilfe von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Beispiele für die spezifische Verwendung von CSS FlexboxNächster Artikel：Detaillierte Beispiele für die spezifische Verwendung von CSS Flexbox

In Verbindung stehende Artikel

Mehr sehen