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

• 2019 年 11 月 26 日
• 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/ITXDL123/article/details/103232178

3 線性漸變實例

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

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

第一種方法：

第二種方法：

第三種方法：

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

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

同樣，我們可以將起點參數設置為bottom、left、right，依次是從底部向頂部漸變，從左邊向右邊漸變和從右邊向左邊漸變。

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

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

第一種方法：

第二種方法：

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

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

三、多色線性漸變

前面向大家演示的效果僅是一些簡單的線性漸變（兩色漸變），其實在實際中，漸變不僅僅是只有兩種顏色，會有多色。接下來，我們一起來看一個從左向右的五彩漸變，程式碼如下：

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

圖3 五色漸變

四、自定義線性漸變

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

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

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

圖4 自定義線性漸變

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

五、進度條

應用CSS3線性漸變，我們還可以實現進度條效果。製作進度條，我們需要使用到repeating-linear-gradient參數。repeating-linear-gradient的含義是用重複的線性漸變創建影像。repeating-linear-gradient()的語法與linear-gradient()相同。實現進度條效果，程式碼如下：

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