这篇文章主要介绍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(){
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){
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>
以上是“css3如何编写浏览器背景渐变背景色”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!