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选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
CSS3常见动画的实现方式
Apr 14 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
mysql 搜索之简单应用
2007/04/27 PHP
php 团购折扣计算公式
2011/11/24 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python简单实现区域生长方式
2020/01/16 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
python 伯努利分布详解
2020/02/25 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
经贸专业毕业生求职信范文
2014/05/01 职场文书
安全例会汇报材料
2014/08/23 职场文书
西双版纳导游词
2015/02/03 职场文书
神秘岛读书笔记
2015/07/01 职场文书
同学聚会开幕词
2019/04/02 职场文书
创业计划书之校园超市
2019/09/12 职场文书