IT兄弟連 HTML5教程 CSS3屬性特效 漸變2 線性漸變實例

 

3 線性漸變實例

 

1、顏色從頂部向底部漸變

製做從頂部到底部直線漸變有三種方法，第一種是起點參數不設置，由於起點參數的默認值爲「top」；第二種方法起點參數設置爲「top」；第三種起點參數使用「-90deg」關鍵詞。爲top_bottom設置從頂部向底部的漸變，三種方法的CSS代碼以下：

第一種方法：

 

第二種方法：

 

第三種方法：

 

上述三種css設置運行的效果相同，top_bottom的背景變爲從白色到黑色的自上而下造成線性漸變。在瀏覽器中查看效果如圖1所示：

圖1  頂部到底部的線性漸變

 

一樣，咱們能夠將起點參數設置爲bottom、left、right，依次是從底部向頂部漸變，從左邊向右邊漸變和從右邊向左邊漸變。

 

2、顏色從左下角向右上角漸變

製做從左下角到左上角直線漸變有兩種方法，第一種是起點參數設置爲「bottom left」；第二種起點參數使用「45deg」關鍵詞。爲left_bottom設置從頂部向底部的漸變，CSS代碼以下：

第一種方法：

 

第二種方法：

 

上述兩種css設置運行的效果相同，left_bottom的背景變爲從左下角到右上角造成線性漸變。在瀏覽器中查看效果如圖2所示：

圖2  左下角到右上角的線性漸變

 

3、多色線性漸變

前面向你們演示的效果僅是一些簡單的線性漸變（兩色漸變），其實在實際中，漸變不單單是隻有兩種顏色，會有多色。接下來，咱們一塊兒來看一個從左向右的五彩漸變，代碼以下：

 

將包含上述代碼的html文件在瀏覽器中查看，漸變效果如圖3所示：

圖3  五色漸變

 

4、自定義線性漸變

那麼問題來了，如何實現下圖的漸變效果？

 

經過上圖能夠注意到，顏色從0％的不透明度開始，第一個色標的位置位於0%,其透明度爲0%，第二個色標位置爲80%的不透明度，位置位於8%。咱們能夠經過漸變工具從CSS聲明中捕捉相關數據，咱們能夠實現自定義線性漸變，CSS代碼以下：

 

將替換了CSS代碼的html在瀏覽器中查看，漸變效果如圖4所示：

圖4  自定義線性漸變

 

上圖再證實，一個漸變能夠包含多個色標，位置值爲0~1之間的小數，或者0~100%之間的百分數，指定色標的位置比例，其用法與Photoshop中的值線漸變工具用法類似。

 

5、進度條

應用CSS3線性漸變，咱們還能夠實現進度條效果。製做進度條，咱們須要使用到repeating-linear-gradient參數。repeating-linear-gradient的含義是用重複的線性漸變建立圖像。repeating-linear-gradient()的語法與linear-gradient()相同。實現進度條效果，代碼以下：

 

首先構造一個進度條，當鼠標移入進度條時，進度條開始運動，在瀏覽器中查看效果如圖5所示：

圖5  進度條