css3编写浏览器背景渐变背景色的方法


Posted in HTML / CSS onMarch 05, 2018

本文介绍了css3编写浏览器背景渐变背景色的方法,分享给大家,具体如下:

效果如下:

css3编写浏览器背景渐变背景色的方法

知识点:rgb全色循环算法,HEX与RGB颜色转换算法、CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等。

css代码:

<style>
    *{margin:0;padding:0;}
    body#wrap{width:100%;height:500px;
}
  </style>

javascript代码:

<script>
        (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+')' //谷歌
                    oWrap.style.background='-ms-linear-gradient(left,'+colorL+','+colorR+')'  //ie 10 11
                }
             
            
            }
        })();            
    </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
html5 标签
Jul 16 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 #HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 #HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 #HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 #HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 #HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 #HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 #HTML / CSS
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
一个简单计数器的源代码
2006/10/09 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
利用javascript查看html源文件
2006/11/08 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
python如何删除列为空的行
2020/07/17 Python
任意存:BOXFUL
2018/05/21 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
员工拓展培训方案
2014/02/15 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫