Detailed example of how to write browser gradient background color using css3-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Detailed example of how to write browser gradient background color using css3

小云云

Dec 22, 2017 pm 03:21 PM

css3firefoxwebkit

This article mainly introduces the method of writing browser background gradient background color in CSS3. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The effect is as follows:

Knowledge points: rgb full color cycle algorithm, HEX and RGB color conversion algorithm, CSS3 color gradient, CSS3 gradient color compatible ie method , timers and loops, function encapsulation, array applications, etc.

Source code:

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

Related recommendations:

CSS3 gradient background color usage method is compatible with IE9+

JS method to achieve gradient background color when entering the page_javascript skills

Detailed explanation of how to make the background color gradient compatible with css

The above is the detailed content of Detailed example of how to write browser gradient background color using css3. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Anchor Positioning Just Don't Care About Source OrderApr 29, 2025 am 09:37 AM

The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.

What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PM

Article discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.

What are the different CSS border properties?Apr 28, 2025 pm 05:30 PM

The article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.

What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PM

The article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.

What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PM

Article discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.

How can we add comments in CSS?Apr 28, 2025 pm 05:27 PM

The article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.

What are CSS Selectors?Apr 28, 2025 pm 05:26 PM

The article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.

Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PM

The article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.

See all articles