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