若是大一學子或者是真心想學習剛入門的小伙伴可以私聊我，若你是真心學習可以送你書籍，指導你學習，給予你目標方向的學習路線，無套路，博客為證。

本節案例如下（其他動效篇幅原因逐步講解，歡迎三連）：
請添加圖片描述

一、線性漸變

1.1 漸變分類

在 CSS 中，使用漸變色需要用到 gradient 屬性，而 gradient 屬性分為 線性漸變 linear-gradient 與 徑向漸變 radial-gradient。

線性漸變和徑向漸變的不同在于漸變色方向不同，線性漸變的漸變方向可以指定為上下左右、角度以及對角漸變，徑向漸變的方向則是基于某個中心點。

例如咱們使用一個線性漸變給定漸變方向為上下，漸變色為紅橙，那么可以寫成：

<style>background: linear-gradient( rgb(255, 123, 0), rgb(255, 0, 0));
</style>

1.2 漸變色默認（上下）方向

默認情況下，線性漸變為上下漸變。在以上 css 代碼，給定 background 漸變色，給予漸變色使用linear-gradient 或者 radial-gradient，在此使用 linear-gradient 表示給予線性漸變，在線性漸變的參數中，給予對應的顏色，在此給予了兩個 rgb 值，一個為橙色 rgb(255, 123, 0) 另一個為紅色 rgb(255, 0, 0)，兩者間使用逗號進行間隔，那么此時的圖片如下：
在這里插入圖片描述
因為第一個顏色給予的是橙色，所以頂部的顏色為橙色，第二個顏色給予的顏色是紅色，所以此時在 div 中的顏色為紅色。

千萬不要認為漸變色只能給予兩個顏色，漸變色還可以給予多個顏色，例如以下示例：

<style>background: linear-gradient( rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255));
</style>

以上示例漸變色給予了多個不同的顏色，使用漸變色時會將這些顏色自動的進行過度，以下是漸變色效果：
在這里插入圖片描述

1.3 給予漸變方向漸變色

漸變色還可以給予默認的漸變色方向，例如左右漸變；左右漸變的默認起始方向是左，只需要給第一個參數一個方向值即可，在此給予一個漸變色參數為 to right, 表示漸變色方向從左往右：

<style>background: linear-gradient(to right, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255));
</style>

那么此時漸變色的朝向則會發生改變：

在這里插入圖片描述

1.4 給予對角漸變色

對角漸變表示給予一個叫，使漸變色往該方向進行漸變，例如 bottom left 表示左下角、bottom right 表示右下角，那么左下角的漸變更改方向即可，編寫如下：

<style>background: linear-gradient(to bottom left, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255));
</style>

效果如下：
在這里插入圖片描述
右下角的漸變色編寫如下：

<style>background: linear-gradient(to bottom right, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255));
</style>

效果如下：
在這里插入圖片描述

1.5 給予角度漸變色

除了對應的固定方向，我們還可以填寫對應角度使漸變色朝著固定方向漸變。例如如下代碼示例：

<style>background: linear-gradient(0deg, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255))
, red, blue)
</style>

其中的 0deg 表示角度為 0，deg 是角度單位，默認情況是上下漸變，若角度值為正，表示順時針旋轉角度，若角度為負，表示逆時針選準漸變方向。

此時我們給予角度為 90deg，那么此時漸變方向為從右到左：
在這里插入圖片描述

如果角度為 -90deg 那么則是從左到右：
在這里插入圖片描述
我們還可以給予其他角度，例如 10deg、20deg 可以去進行嘗試，由于內容過于贅述在此不在贅述，讀者自行進行修改演示即可。

1.6 漸變線（重點）

漸變線在漸變中是指漸變顏色停止的線，漸變線可以指定位置，并且可以通過漸變線使漸變色居于某一個范圍之內，漸變線的使用一定是要在 2 種漸變色以上。

例如如下示例：
在這里插入圖片描述

該示漸變色為左上角到右下角漸變，顏色依次是紅、綠、藍，這三種顏色如何做到藍色漸變只有一小塊，而大部分是綠色漸變，我們仔細觀察，紅色的非漸變區域只有左上角一小部分，那如何制作出這樣的漸變效果呢？

要完成這個效果，我們需要給予漸變線位置，也就是確定停止顏色為純色的分界線位置。如以下代碼：

<style>background: linear-gradient(to bottom right, red 5%, green 90%, blue 100%);
</style>

該代碼我們可以得知，這個漸變方向為左上角到右下角進行漸變，并且給予的顏色是紅綠藍，但在這些顏色之后分別帶上了對應的百分比，這些百分比就是表示這些顏色在什么地方停止。

我們用其中一個顏色舉例，例如 red 5%，表示這個紅色在整個顏色范圍的 5% 時停止純色范圍，開始進行漸變，這個范圍指的是從初始位置開始到結束方向的百分比范圍，例如如圖：
在這里插入圖片描述

在這里的 red 5% 指的是紅色的顏色純色停止范圍在漸變方向上范圍的 5% 處，所以在漸變中表現為 5% 之后是綠色和紅色的漸變范圍：
在這里插入圖片描述

此時綠色的漸變線在分享的 90% 處：

在這里插入圖片描述

那么之后的就是藍色顏色，因為藍色漸變線在終點 100% 處，由此形成了這個漸變范圍。

1.7 重復漸變

漸變色還可以進行重復漸變，例如：
在這里插入圖片描述
只需要將 linear-gradient 更改為 repeating-linear-gradient 即可，例如：

<style>background: repeating-linear-gradient(to bottom right, red 5%, green 10%, blue 15%);
</style>

此時漸變色將會不充滿整個空間，而是重復執行漸變。

線性漸變完整代碼調用代碼如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動效實戰課程之漸變色操作</title><style>.gradient-to-down {background: repeating-linear-gradient(to bottom right, red 5%, green 10%, blue 15%);}div {height: 200px;width: 200px;}</style>
</head><body><div class="gradient-to-down"></div>
</body></html>

二、徑向漸變

2.1 徑向漸變

徑向漸變我們可以看成是一個點（圓）的建表，通過定義這個點的位置和漸變形狀，完成漸變需求。

我們先看一個簡單的徑向漸變：

<style>background: radial-gradient(red, green, blue);
</style>

我們由此得知，徑向漸變使用 radial-gradient；在這個徑向漸變中使用了紅綠藍三種顏色，這三種顏色的徑向漸變如下：
在這里插入圖片描述
當然我們也可以使用多種顏色進行漸變，在此不在進行贅述。

2.2 漸變形狀

徑向漸變可以設置漸變形狀，例如我設置一個水平半徑為50px，垂直半徑為 100px 的徑向漸變，代碼如下：

<style>background: radial-gradient(50px 100px, red, green, blue)
</style>

效果如下：

在這里插入圖片描述
此時由于半徑小于垂直半徑，此時漸變將會看成是一個橢圓狀。

我們也可以擴大漸變范圍，例如垂直半徑為300px：

<style>background: radial-gradient(50px 300px, red, green, blue)
</style>

效果如下：
在這里插入圖片描述

由于這個div 大小為 200*200px 在此會超出可視范圍，但我們也能感受其效果。

注意，更改形狀也有限定大小作用。

2.3 漸變中心

除了更改漸變形狀，我們還可以更改徑向漸變的中心點位置，例如如下代碼：

<style>background: radial-gradient(at 10% 30%, red, green, blue)
</style>

顯示效果如下：

在這里插入圖片描述

此時 at 10% 30% 表示圓心點位置在從左到右 x 軸的 10% 以及 y 軸從上到下的 30% 處，at 之后則是位置信息，也可以使用單位值進行代替：

<style>background: radial-gradient(at 50px 100px, red, green, blue)
</style>

效果如下：
在這里插入圖片描述
更改中心點以及形狀可以同時使用：

<style>background: radial-gradient(10px 50px at 50px 100px, red, green, blue)
</style>

效果如下：

在這里插入圖片描述
其他操作跟線性漸變一致，例如限定漸變范圍：

<style>background: radial-gradient(red 10%, green 45%, blue 50%)
</style>

效果如下：

在這里插入圖片描述
又或者是重復漸變，代碼如下：

<style>background: repeating-radial-gradient(red 10%, green 15%, blue 20%)
</style>

效果如下：

在這里插入圖片描述

此部分完整代碼如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動效實戰課程之漸變色操作</title><style>.radial-gradient-demo {background: repeating-radial-gradient(red 10%, green 15%, blue 20%)}div {height: 200px;width: 200px;}</style>
</head><body><div class="radial-gradient-demo"></div>
</body></html>

2.4 漸變邊緣控制

再進行徑向漸變時，我們還可以對漸變邊緣進行控制，例如在一般漸變時，咱們的邊緣是這樣的：
在這里插入圖片描述
這是因為最后的漸變色為一個顏色，若我們使用最后一個顏色為透明色那么即可使當前的漸變產生一種發散效果，這個時候就得使用 rgba 進行漸變。

我們一般情況下純色使用 rgb 進行表示，這個 rgba 的 a 表示透明度，例如我們現在給予一個 a 值為 0 即一個透明顏色進行漸變，那么即可使該漸變邊緣透明：

<style>background: radial-gradient(red 10%, green 15%, rgba(0, 0, 255, 0) 20%)
</style>

可以看到，此漸變代碼種的三種顏色分別是紅綠和 rgba(0, 0, 255, 0)， rgba(0, 0, 255, 0) 的 rgb 值分別是 0、0、255 以及最后一個 0，a 的取值可以從 0-1 進行取值，1則表示不透明，0則表示透明，那么此時這個顏色不管取啥，由于透明度取 0，則是透明色，那么頁面漸變顯示如下：

在這里插入圖片描述

也可以漸變一種顏色與透明色：

<style>background: radial-gradient(red,rgba(0, 0, 255, 0))
</style>

顯示如下：

在這里插入圖片描述
此時并沒有表達到我們想要的邊緣透明的效果，我們需要增加對應的 size 參數，size 參數可選為 closest-side、farthest-side、closest-corner、farthest-corner：

closest-side 表示當前尺寸大小與中心點最近的邊的距離
farthest-side 表示當前尺寸大小與中心點最遠的邊的距離
closest-corner 表示當前尺寸大小與中心點最近的角的距離
farthest-corner 表示當前尺寸大小與中心點最遠的角的距離

那么代碼就可以寫成：

<style>background: radial-gradient(closest-side, red, rgba(0, 0, 255, 0))
</style>

此時我增加了 closest-side ，設定當前尺寸遇到最近的邊的距離為漸變大小，那么此時效果如下：

在這里插入圖片描述
若此時你切換成 farthest-side 進行設置效果也一樣，因為當前只有一條邊，即是最遠也是最近；若設置為 closest-corner 效果如下：

在這里插入圖片描述
此時將會把漸變尺寸的大小設置為遇到角的距離為大小，若設置為 farthest-corner 效果也一樣，因為只有這四個角。

三、漸變色實戰

案例如下：
請添加圖片描述

3.1 背景移動

背景移動使用 background-position 屬性，當我們使用漸變色作為背景時，需要移動漸變色才能時背景發生改變。 background-position 定義背景圖片開始繪制的點，接收兩個參數，這個參數便是這個開始繪制點的坐標，默認為左上角，值為0 0。

此時我們定義一個樣式：

<style>div {width: 300px;height: 300px;background: url("../img/img05.jpg") no-repeat;}
</style>

該樣式確認了一張圖片進行顯示，并且不重復，那么接下來使用div 后圖片直接作為背景，顯示如下：
在這里插入圖片描述
可以發現，此圖片超出范圍并不進行顯示，此時我們使用 background-position 更改樣式后如下：

<style>div {width: 300px;height: 300px;background: url("../img/img05.jpg") no-repeat;background-position: 50% 50%;}
</style>

background-position 確定顯示點為圖片中心，此時頁面效果如下：

在這里插入圖片描述
接下來咱們就需要使用該屬性移動漸變色背景，使其發生改變。

3.2 漸變色移動背景

在一般的網站中，有時我們可以看到一些漸變色背景并且移動的示例，那么如何使漸變色進行移動呢？

漸變色移動需要使用對應的動畫，動畫使用 animation 屬性，并且還需要定義一個幀動畫。

在定義動畫前，我們還需要使用 background-size 屬性對漸變色進行放大，否則無法移動漸變色背景，畢竟如果你不放大，那么這個漸變色就容器那么大，無法進行移動。

此時我們創建一個類樣式，命名為 .float-gradient，并且在其內部加上漸變色代碼：

<style>.float-gradient {background: linear-gradient(-45deg, #990066, #FFCC00, #CC0033);background-size: 500% 500%;}
</style>

以上代碼中 background-size 使漸變色范圍放大 5倍，包括橫軸豎軸方向；接著我們增加一個動畫：

<style>.float-gradient {background: linear-gradient(-45deg, #990066, #FFCC00, #CC0033);background-size: 500% 500%;animation: moiveAnimation 15s;}
</style>

以上樣式代碼中 animation 定義動畫，moiveAnimation 是自定義動畫的動畫名稱，15s 表示 15秒一個周期，s表示單位為秒，若想動畫循環播放，需要增加 infinite：animation: moiveAnimation 15s infinite;

接下來我們就需要開始創建一個動畫：

<style>@keyframes moiveAnimation {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
</style>

以上就是一個動畫的創建 @keyframes 表示創建一個動畫，moiveAnimation 為動畫名，其內部就是這個動畫過程；0% 表示當動畫周期到 0% 時的背景狀態，background-position 表示當前背景在此時刻移動至何位置，在此定義了 3 個狀態，起始是移動至左側中心、隨后移動至右側中心，最后移動至原本位置，那么直接給予 body 這個樣式即可。

接下來我們需要給予一個文本，需要水平居中，直接設置 body 內容：

<style>body {margin: 0 0;text-align: center;}
</style>

并且設置 span 直接距離頂部一定距離，設置大小、設置元素種類（此內容之前的課程有講，在此不再贅述）：

<style>span {display: inline-block;margin-top: 300px;font-size: 50px;color: aliceblue;font-weight: bold;}
</style>

那么此時就完成了移動漸變色背景制作，此部分完整代碼如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動效實戰課程之漸變色操作</title><style>body {margin: 0 0;text-align: center;}span {display: inline-block;margin-top: 300px;font-size: 50px;color: aliceblue;font-weight: bold;}.float-gradient {background: linear-gradient(-45deg, #990066, #FFCC00, #CC0033);background-size: 500% 500%;animation: moiveAnimation 15s infinite;}@keyframes moiveAnimation {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}</style>
</head><body class="float-gradient"><span>純 CSS 浮動背景——1_bit CSS動效實戰課程</span>
</body></html>

效果如下：

請添加圖片描述

3.3 徑向漸變背景

制作示例如下：
請添加圖片描述
如果你對線性漸變背景不滿意，還可以使用徑向漸變作為背景。

此時我們可以直接設置當前背景圖為漸變色，為了更好演示，直接設置當前類樣式在 body 中調用：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動效實戰課程之漸變色操作</title><style>.radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0));background-size: 130vw 130vh;background-position: -80vw -80vh;}</style>
</head><body class="radial-gradient-demo"></body></html>

此時我們可以看到，設置了一個漸變色，使用了 closest-side ，在大小設置為 130vw 130vh（vw和vh是視窗大小），background-position 也用視窗位置指定了，效果如下：

在這里插入圖片描述

此時效果為何有 4 個漸變色？這是因為設置背景圖片時沒有給予不重復指定，否則漸變色將會重復鋪滿整個背景圖區域，在此直接設置背景不能重復，在類樣式中添加：

<style>background-repeat: no-repeat;
</style>

這時，演示如下：
在這里插入圖片描述
那如何做到很多顏色呢？這時只需要添加多個漸變顏色即可，樣式如下：

<style>.radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0));background-size: 130vw 130vh, 120vw 120vh;background-position: -80vw -80vh, 30vw -20vh;background-repeat: no-repeat;}
</style>

以上 css 代碼，設置多個漸變色以及多個 size、position，頁面如何需要大家耐心設置，否則樣式將會不好看，奇奇怪怪，在這里設置了右上角漸變，演示如下：
在這里插入圖片描述

接著設置左下角：

<style>
.radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh;background-repeat: no-repeat;
}
</style>

演示如下：

在這里插入圖片描述
接著右下角：

<style>
.radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;background-repeat: no-repeat;
}
</style>

演示如下：

在這里插入圖片描述

為了使整個頁面表現更好，我們可以再設置一個背景色使當前頁面更舒服：

<style>
.radial-gradient-demo {background-color: #CC0033;background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;background-repeat: no-repeat;
}
</style>

演示效果如下：

在這里插入圖片描述

是不是魔法就誕生了？接下來我們還需要讓這些類似的光影動起來，那么需要設置動畫：

在這里插入圖片描述
在設置時一定要注意上圖所說要點。

此時設置完第一個動畫，頁面效果如下：

請添加圖片描述
不好意思，鼠標影響了觀感。

接著依次設置剩下的動畫效果，最終代碼如下：請添加圖片描述
若覺得藍色太亮，可以修改為其他顏色：

接著我們設置文本：

<body class="radial-gradient-demo"><span>純 CSS 漸變浮動背景——1_bit CSS動效實戰課程</span>
</body>

為了居中，我們再設置樣式：

<style>
body {text-align: center;
}span {line-height: 100vh;font-size: 50px;color: white;
}
</style>

直接設置 span 行高為整個屏幕行高即可垂直居中。

完整代碼如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動效實戰課程之漸變色操作</title><style>body {text-align: center;}span {line-height: 100vh;font-size: 50px;color: white;}.radial-gradient-demo {background-color: #CC0033;background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(7, 92, 75), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;background-repeat: no-repeat;animation: 15s moiveAnimation infinite;}@keyframes moiveAnimation {0%,100% {background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;}25% {background-size: 120vw 120vh, 130vw 150vh, 130vw 120vh, 100vw 110vh;background-position: -30vw -30vh, 40vw -10vh, 0vw 10vh, -10vw 20vh;}50% {background-size: 130vw 130vh, 140vw 100vh, 100vw 150vh, 90vw 110vh;background-position: 10vw -60vh, 20vw 10vh, 10vw 30vh, 10vw -20vh;}75% {background-size: 140vw 140vh, 100vw 130vh, 100vw 150vh, 130vw 110vh;background-position: -70vw -70vh, 0vw -10vh, 30vw -20vh, 20vw 30vh;}}</style>
</head><body class="radial-gradient-demo"><span>純 CSS 漸變浮動背景——1_bit CSS動效實戰課程</span>
</body></html>