实例详解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应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中