這篇文章主要為大家展示了“css中如何實現背景色漸變動畫”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css中如何實現背景色漸變動畫”這篇文章吧。
通過本文，你能了解到 4 種不一樣的，使用純 CSS 制作的漸變背景的過渡動畫的方式。
有的時候，我們可能需要下面這樣的動畫效果，漸變背景色的過渡動畫：
漸變背景的過渡動畫
假設我們漸變的寫法如下：
div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); }按照常規想法，配合 animation ，我們首先會想到在 animation 的步驟中通過改變顏色實現顏色漸變動畫，那么我們的 CSS 代碼可能是：
div { 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 紫色
最后，并沒有我們預期的結果，而是這樣的：
CodePen Demo - linear-graident 變換的動畫效果[1]
我們預期的過渡動畫，變成了逐幀動畫。
也就是說，線性漸變是不支持動畫 animation 的。
那單純的由一個顏色，變化到另外一個顏色呢?像下面這樣：
div { background: #ffc700; animation: gradientChange 3s infinite alternate; } @keyframes gradientChange { 100% { background: #e91e1e; } }我們發現，單純的單色值之間的變化是可以發生漸變的：
單色漸變
部分屬性是不支持直接整個進行過渡動畫的
總結一下，線性漸變(徑向漸變、角向漸變)是不支持 animation 的，單色的 background 是支持的。
查找了下文檔，在 background 附近區域截圖如下：
哪些 CSS 屬性可以動畫?[2]，上面的截圖是不完整的支持 CSS 動畫的屬性，完整的可以戳左邊。
對于 background 相關的，文檔里寫的是支持 background 但是沒有細說不支持 background: linear-gradient()/radial-gradient() 。
那么是否我們想要的背景色漸變動畫就無法實現了呢?下面我們就發散下思維看看有沒有其他方式可以達到我們的目標。
上面哪些 CSS 屬性可以動畫的截圖中，列出了與 background 相關還有 background-position，也就是 background-position 是支持動畫的，通過改變 background-position 的方式，可以實現漸變動畫：
div { 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-position 可以，那么另一個 background-size 當然也是不遑多讓。與上面的方法類似，只是這次 background-position 輔助 background-size ，CSS 代碼如下：
div { 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%; } }CodePen--Demo--position-size 實現漸變動畫[3]
通過改變 background-size 的第一個值，我將背景圖的大小由 3 倍背景區大小向 1 倍背景區大小過渡，在背景圖變換的過程中，就有了一種動畫的效果。
而至于為什么要配合 background-position: 100% 0 。是由于如果不設置 background-position ，默認情況下的值為 0% 0%，會導致動畫最左側的顏色不變，像下面這樣，不大自然：
上面兩種方式雖然都可以實現，但是總感覺不夠自由，或者隨機性不夠大。
不僅如此，上述兩種方式，由于使用了 background-position 和 background-size，并且在漸變中改變這兩個屬性，導致頁面不斷地進行大量的重繪(repaint)，對頁面性能消耗非常嚴重，所以我們還可以試試 transfrom 的方法：
下面這種方式，使用偽元素配合 transform 進行漸變動畫，通過元素的偽元素 before 或者 after ，在元素內部畫出一個大背景，再通過 transform 對偽元素進行變換：
div { position: relative; overflow: hidden; width: 100px; height: 100px; margin: 100px auto; border: 2px solid #000; &::before { content: ""; position: absolute; top: -100%; left: -100%; bottom: -100%; right: -100%; background: linear-gradient(45deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%); background-size: 100% 100%; animation: bgposition 5s infinite linear alternate; z-index: -1; } } @keyframes bgposition { 0% { transform: translate(30%, 30%); } 25% { transform: translate(30%, -30%); } 50% { transform: translate(-30%, -30%); } 75% { transform: translate(-30%, 30%); } 100% { transform: translate(30%, 30%); } }實現原理如下圖所示：
CodePen--Demo--偽元素配合transform實現背景漸變[4]
上面列出來的只是部分方法，理論而言，偽元素配合能夠產生位移或者形變的屬性都可以完成上面的效果。我們甚至可以運用不同的緩動函數或者借鑒蟬原則，制作出隨機性十分強的效果。
當然，本文羅列出來的都是純 CSS 方法，使用 SVG 或者 Canvas 同樣可以制作出來，而且性能更佳。感興趣的讀者可以自行往下研究。
下面這個方法，可謂是新時代的利器。
通過濾鏡 hue-rotate，可以非常方便的實現背景色漸變動畫，過渡效果也非常的自然，代碼量也少，可以稱得上是黑科技了：
div { background: linear-gradient(45deg, #ffc107, deeppink, #9c27b0); animation: hueRotate 10s infinite alternate; } @keyframes hueRotate { 0 { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } } 
CodePen Demo -- hue-rotate實現漸變背景動畫[5]
到今天(2021/04/15)，我們還可以使用 CSS @property 實現背景色漸變動畫，它的出現，極大的增強的 CSS 的能力!
根據 MDN -- CSS Property[6]，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允許開發者顯式地定義他們的 CSS 自定義屬性，允許進行屬性類型檢查、設定默認值以及定義該自定義屬性是否可以被繼承。
@property --colorA { syntax: '<color>'; inherits: false; initial-value: fuchsia; } @property --colorC { syntax: '<color>'; inherits: false; initial-value: #f79188; } @property --colorF { syntax: '<color>'; inherits: false; initial-value: red; } div { background: linear-gradient(45deg, var(--colorA), var(--colorC), var(--colorF)); animation: change 10s infinite linear; } @keyframes change { 20% { --colorA: red; --colorC: #a93ee0; --colorF: fuchsia; } 40% { --colorA: #ff3c41; --colorC: #e228a0; --colorF: #2e4c96; } 60% { --colorA: orange; --colorC: green; --colorF: teal; } 80% { --colorA: #ae63e4; --colorC: #0ebeff; --colorF: #efc371; } }看看效果，完美：
使用 CSS @property 實現的漸變背景動畫
簡單解讀下，CSS @property 其實就是靈活度更高的 CSS 自定義屬性，我們也可以稱其為 CSS Houdini 自定義屬性。其中：
@property --property-name 中的 --property-name 就是自定義屬性的名稱，定義后可在 CSS 中通過 var(--property-name) 進行引用
syntax：該自定義屬性的語法規則，也可以理解為表示定義的自定義屬性的類型
inherits：是否允許繼承
initial-value：初始值
在上述的 DEMO 中，我們利用了 CSS Houdini 自定義屬性，將原本定義在 background 的過渡效果嫁接到了 color 之上，而 CSS 是支持一個顏色變換到另外一個顏色的，這樣，我們巧妙的實現了漸變背景色的過渡動畫。
關于更多 CSS @property 相關的內容，你可以戳這篇文章詳細了解 -- CSS @property，讓不可能變可能[7]
完整的代碼可以戳這里：
CodePen Demo -- CSS Houdini 自定義屬性實現漸變色過渡動畫[8]
至此，我們就得到了 4 種不一樣的，使用純 CSS 制作的漸變背景的過渡動畫的方式。
以上是“css中如何實現背景色漸變動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
