首頁 web前端 css教學 css3實作瀏覽器背景漸層方法代碼

css3實作瀏覽器背景漸層方法代碼

Mar 06, 2018 am 09:27 AM
css3 firefox webkit

本文主要跟大家介紹介紹了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(&#39;wrap&#39;);
            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=&#39;#&#39;+convert(color[0])+&#39;&#39;+convert(color[1])+&#39;&#39;+convert(color[2])+&#39;&#39;;
                colorR=&#39;#&#39;+convert(color[2])+&#39;&#39;+convert(color[0])+&#39;&#39;+convert(color[1])+&#39;&#39;;
                        
                    }
                    gColor(colorL,colorR);
                }
            
            function convert(sRgb){ /*rgb转换成HEX*/
                var sRgb=sRgb;
                var sHex=sRgb.toString(16);
                sHex=sHex.length<2?&#39;0&#39;+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=&#39;-webkit-linear-gradient(left,&#39;+colorL+&#39;,&#39;+colorR+&#39;)&#39; //谷歌
                    oWrap.style.background=&#39;-ms-linear-gradient(left,&#39;+colorL+&#39;,&#39;+colorR+&#39;)&#39;  //ie 10 11
                }
             
            
            }
        })();            
    </script>
登入後複製

相關推薦:
使用css3實作背景漸層方法

CSS3點選按鈕實作背景漸層動畫效果

div+css背景漸層程式碼範例

以上是css3實作瀏覽器背景漸層方法代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1324
25
PHP教程
1272
29
C# 教程
1251
24
純CSS3怎麼實現波浪效果? (程式碼範例) 純CSS3怎麼實現波浪效果? (程式碼範例) Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果?這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法,希望對大家有幫助!

Ubuntu Linux如何移除Firefox Snap? Ubuntu Linux如何移除Firefox Snap? Feb 21, 2024 pm 07:00 PM

要在UbuntuLinux中刪除FirefoxSnap,可以按照以下步驟進行操作:打開終端機並以管理員身份登入Ubuntu系統。執行以下命令以卸載FirefoxSnap:sudosnapremovefirefox系統將提示你輸入管理員密碼。輸入密碼並按下Enter鍵以確認。等待指令執行完成。一旦完成,FirefoxSnap將被完全刪除。請注意,這將刪除透過Snap套件管理器安裝的Firefox版本。如果你透過其他方式(如APT套件管理器)安裝了另一個版本的Firefox,則不會受到影響。透過上述步驟

巧用CSS實現各種奇形怪狀按鈕(附代碼) 巧用CSS實現各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕,希望對大家有幫助!

css怎麼隱藏元素但不佔空間 css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法:1、利用display屬性,只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素,只需為元素加上「position:absolute;top:-9999px;」樣式。

css3怎麼實現花邊邊框 css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中,可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框,即給邊框加上背景圖片,只需要將背景圖片指定為花邊樣式即可;語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

原來利用純CSS也能實現文字輪播與圖片輪播! 原來利用純CSS也能實現文字輪播與圖片輪播! Jun 10, 2022 pm 01:00 PM

怎麼製作文字輪播與圖片輪播?大家第一想到的是利用js,其實利用純CSS也能實現文字輪播與圖片輪播,下面來看看實作方法,希望對大家有幫助!

css3如何實現滑鼠點擊圖片放大 css3如何實現滑鼠點擊圖片放大 Apr 25, 2022 pm 04:52 PM

實作方法:1、使用「:active」選擇器選取滑鼠點擊圖片的狀態;2、使用transform屬性和scale()函數實現圖片放大效果,語法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。

css3怎麼設定動畫旋轉速度 css3怎麼設定動畫旋轉速度 Apr 28, 2022 pm 04:32 PM

在css3中,可以利用「animation-timing-function」屬性來設定動畫旋轉速度,該屬性用於指定動畫將如何完成一個週期,設定動畫的速度曲線,語法為「元素{animation-timing-function:速度屬性值;}」。

See all articles