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 相关文章推荐
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 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
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JavaScript运算符小结
2015/06/03 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python对html过滤处理的方法
2018/10/21 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
利用python实现汉诺塔游戏
2021/03/01 Python
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
小学门卫岗位职责
2013/12/17 职场文书
葬礼司仪主持词
2014/03/31 职场文书
走进敬老院活动总结
2014/07/10 职场文书
先进教师个人总结
2015/02/11 职场文书
人与自然观后感
2015/06/16 职场文书
初中美术教学反思
2016/02/17 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
总结Python常用的魔法方法
2021/05/25 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL