使用CSS巧妙地製作背景色漸層動畫執行個體

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS屬性，趕緊去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

本文從這裡開始。有的時候，嗯，應該說某些特定場合，我們可能需要下面這樣的動畫效果，漸層 + animation ：

假設我們漸層的寫法如下：

p {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);}

按照常規想法，配合 animation ，我們首先會想到在 animation 的步驟中通過改變顏色實現色彩坡形動畫，那麼我們的 CSS 代碼可能是：

p {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);    animation: gradientChange 2s infinite;}@keyframes gradientChange  {    100% {        background: linear-gradient(90deg,  #e91e1e 0%, #6f27b0 100%);    }}

上面我們用到了三種顏色：

• #ffc700 黃色

• #e91e1e 紅色

• #6f27b0 紫色

最後，並沒有我們預期的結果，而是這樣的：

我們預期的補間動畫，變成了逐幀動畫。

也就是說，線性漸層是不支援動畫 animation 的，那單純的由一個顏色，變化到另外一個顏色呢？像下面這樣：

p {    background: #ffc700;    animation: gradientChange 3s infinite alternate;}@keyframes gradientChange  {    100% {        background: #e91e1e;    }}

發現，單純的單色值是可以發生漸層的：

So

總結一下，線性漸層（放射狀漸層）是不支援 animation 的，單色的 background 是支援的。

尋找了下文檔，在 background 附近地區如下：

哪些 CSS 屬性可以動畫?，上面的是不完整的支援 CSS 動畫的屬性，完整的可以戳左邊。

對於 background 相關的，文檔裡寫的是支援 background 但是沒有細說不支援 background: linear-gradient()/radial-gradient() 。猜測原因，可能是由於漸層中加入 animation 的變化對過於消耗效能。

那麼是否我們想要的背景色漸層動畫就無法實現了呢？下面我們就發散下思維看看有沒有其他方式可以達到我們的目標。

通過 background-position 類比漸層動畫

上面哪些 CSS 屬性可以動畫的中，列出了與 background 相關還有 background-position ，也就是 background-position 是支援動畫的，通過改變 background-position 的方式，可以實現漸層動畫：

p {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);    background-size: 200% 100%;    background-position: 0 0;    animation: bgposition 2s infinite linear alternate;}@keyframes bgposition {    0% {        background-position: 0 0;    }    100% {        background-position: 100% 0;    }}

這裡我們還配合了 background-size。首先瞭解下：

background-position：指定圖片的初始位置。這個初始位置是相對於以 background-origin 定義的背景位置圖層來說的。

background-size：設定背景圖片大小。當取值為百分比時，表示指定背景圖片相對背景區的百分比大小。當設定兩個參數時，第一個值指定圖片的寬度，第二個值指定圖片的高度。

通過 background-size: 200% 100% 將圖片的寬度設定為兩倍背景區的寬度，再通過改變 background-position 的 x 軸初始位置來移動圖片，由於背景圖設定的大小是背景區的兩倍，所以 background-position的移動是由 0 0 -> 100% 0 。最終效果如下：

通過 background-size 類比漸層動畫

既然 background-position 可以，那麼另一個 background-size 當然也是不遑多讓。與上面的方法類似，只是這次 background-position 輔助 background-size ，CSS 代碼如下：

p {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);    background-position: 100% 0;    animation: bgSize 5s infinite ease-in-out alternate;}@keyframes bgSize {    0% {        background-size: 300% 100%;    }    100% {        background-size: 100% 100%;    }}

效果如下：

通過改變 background-size 的第一個值，我將背景圖的大小由 3 倍背景區大小向 1 倍背景區大小過渡，在背景圖變換的過程中，就有了一種動畫的效果。

而至於為什麼要配合 background-position: 100% 0 。是由於如果不設定 background-position ，預設情況下的值為 0% 0%，會導致動畫最左側的顏色不變，像下面這樣，不大自然：

通過 transform 類比漸層動畫

上面兩種方式雖然都可以實現，但是總感覺不夠自由，或者隨機性不夠大。

不僅如此，上述兩種方式，由於使用了 background-position 和 background-size，並且在漸層中改變這兩個屬性，導致頁面不斷地進行大量的重繪（repaint），對頁面效能消耗非常嚴重，所以我們還可以試試 transfrom 的方法：

使用虛擬元素配合 transform 進行漸層動畫，通過元素的虛擬元素 before 或者 after ，在元素內部畫出一個大背景，再通過 transform 對虛擬元素進行變換：

p {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);    background-position: 100% 0;    animation: bgSize 5s infinite ease-in-out alternate;}@keyframes bgSize {    0% {        background-size: 300% 100%;    }    100% {        background-size: 100% 100%;    }}

實現原理如所示：

我們可以在任意 animation 動畫過程中再加入 scale 、skew 、roate 等變換，讓效果看上去更加逼真隨機。效果如下：

上面列出來的只是部分方法，理論而言，虛擬元素配合能夠產生位移或者形變的屬性都可以完成上面的效果。我們甚至可以運用不同的easing 函式或者借鑒蟬原則，製作出隨機性十分強的效果。

當然，本文羅列出來的都是純 CSS 方法，使用 SVG 或者 Canvas 同樣可以製作出來，而且效能更佳。感興趣的讀者可以自行往下研究。

運用背景色漸層動畫

背景色漸層動畫具體可以運用在什麼地方呢，稍微舉個例子。

背景色漸層過渡實現按鈕的明暗變化

效果如下：

除此之外，在背景板凸顯文字，讓一些靜態底圖動起來吸引眼球等地方都有用武之地。

到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。