css3編寫瀏覽器背景漸變背景色的方法
發(fā)布時(shí)間：2018-03-05 16:27:52 作者：奔跑的蝸牛 
我要評(píng)論
我要評(píng)論本篇文章主要介紹介紹了css3編寫瀏覽器背景漸變背景色的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了css3編寫瀏覽器背景漸變背景色的方法，分享給大家，具體如下：
效果如下：
知識(shí)點(diǎn)：rgb全色循環(huán)算法，HEX與RGB顏色轉(zhuǎn)換算法、CSS3顏色漸變，CSS3漸變色兼容ie方法，定時(shí)器與循環(huán)，函數(shù)封裝,數(shù)組應(yīng)用等。
css代碼：
<style>
*{margin:0;padding:0;}
body#wrap{width:100%;height:500px;
}
</style>
javascript代碼：
<script>
(function(){
var oWrap=document.getElementById('wrap');
var max=220; /*存儲(chǔ)封值*/
var min=180; /*存儲(chǔ)谷值*/
var color=[max,min,min]; /*根據(jù)初始值紅色來(lái)初始化數(shù)組*/
var timer=null;
var length=color.length;
var colorL,colorR
timer=setInterval(change,20);
/*不容許在機(jī)組運(yùn)行中直接修改代碼*/
function change(){
/*在定時(shí)器中每過(guò)20毫秒 執(zhí)行一次代碼*/
/*檢測(cè)一次數(shù)組*/
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轉(zhuǎn)換成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)){
//通過(guò)正則檢測(cè)瀏覽器信息是否是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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS3實(shí)現(xiàn)帶視差背景漸變效果的平滑圖片輪播幻燈片特效源碼
這是一款基于CSS3實(shí)現(xiàn)帶視差背景漸變效果的平滑圖片輪播幻燈片特效源碼。畫面中心的幻燈片點(diǎn)擊左右切換按鈕、或底部的焦點(diǎn)即可實(shí)現(xiàn)畫面的切換。且圖片平滑輪播切換過(guò)程中伴2019-12-04
詳解CSS背景漸變圖片transtion過(guò)渡效果技巧
這篇文章主要介紹了詳解CSS背景漸變圖片transtion過(guò)渡效果技巧的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-26CSS3點(diǎn)擊按鈕實(shí)現(xiàn)背景漸變動(dòng)畫效果
這篇文章給大家介紹的是，利用CSS3實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕的時(shí)候，按鈕的背景是漸變動(dòng)畫的效果，實(shí)現(xiàn)后的效果非常好，開發(fā)的時(shí)候利用這種效果的按鈕會(huì)給用戶一種非?？犰诺母惺?，感2016-10-19- 這篇文章主要介紹了用CSS3實(shí)現(xiàn)背景漸變的方法,作者并沒(méi)有給出效果demo這個(gè)比較殘念...需要的朋友可以參考下2015-07-14
CSS實(shí)現(xiàn)背景漸變和自動(dòng)全屏的代碼
這篇文章主要介紹了CSS 關(guān)于背景漸變和自動(dòng)全屏的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考2020-06-22
