如何在 CSS 中制作多色漸變效果？

Question

我將如何創建移動漸變背景？

Answer 1

A) CSS可以進行模糊處理，如果你制作一個小圖像，例如只有 5x4 像素的隨機顏色，將這個圖像拉伸到100%的height和width作為DIV的背景，並在其上應用大量模糊，你的結果可能看起來很相似。 但是，模糊並不適用於所有瀏覽器，因此您需要為不受支持的瀏覽器提供后備解決方案。

B)你也可以在CSS定義線性漸變。 從理論上講，但我以前從未嘗試過，我們可以使用CSS動畫/過渡的opacity來制作具有最小顏色差異的多個漸變DIV ，以隨着時間的推移混合圖層。

下面的代碼段需要更多的調整，因為它在瀏覽器的所有可能的奇怪情況下都不起作用，而且在代碼段視圖中還有一些在純 html 中不可見的填充偏移量，因為代碼段中缺少一個 body 標記。 但是，您要求獲得一些指示。 我希望您可以優化此代碼並與社區分享您的結果。 據我所知，它確實適用於 macOS Safari。 Firefox 和 Chrome 仍然直接跳轉到過渡的末尾。 所以我祝你調整愉快！

 function startTransitions() { document.getElementById('gradient-top-left').style.opacity = "0.1"; document.getElementById('gradient-top-right').style.opacity = "0.1"; document.getElementById('gradient-bottom-left').style.opacity = "0.1"; document.getElementById('gradient-bottom-right').style.opacity = "0.1"; document.getElementById('colors').style.opacity = "1.0"; } document.addEventListener('DOMContentLoaded', function() { startTransitions(); });

 #canvas { margin: 0px; padding 0px; } #colors { position: absolute; margin: 0px; background-image: url(http://testing.2x2p.com/gradient/colors.png); background-size: cover; min-height: 100%; min-width: 100%; filter: blur(120px); -webkit-filter: blur(120px); z-index: 1; opacity: 0.0; -webkit-transition: opacity 6s ease-in-out 1s; -moz-transition: opacity 6s ease-in-out 1s; -ms-transition: opacity 6s ease-in-out 1s; -o-transition: opacity 6s ease-in-out 1s; transition: opacity 6s ease-in-out 1s; } #gradient-top-left { margin: 0px; position: absolute; background-color: #000; min-height: 100%; min-width: 100%; background-image: linear-gradient(to bottom right, orange, white); z-index: 2; -webkit-transition: opacity 5s ease-in-out 2s; -moz-transition: opacity 5s ease-in-out 2s; -ms-transition: opacity 5s ease-in-out 2s; -o-transition: opacity 5s ease-in-out 2s; transition: opacity 5s ease-in-out 2s; } #gradient-top-right { margin: 0px; position: absolute; background-color: #000; min-height: 100%; min-width: 100%; background-image: linear-gradient(to bottom left, lightgreen, white); opacity: 0.7; z-index: 3; -webkit-transition: opacity 3s ease-in-out 4s; -moz-transition: opacity 3s ease-in-out 4s; -ms-transition: opacity 3s ease-in-out 4s; -o-transition: opacity 3s ease-in-out 4s; transition: opacity 3s ease-in-out 4s; } #gradient-bottom-left { margin: 0px; position: absolute; background-color: #000; min-height: 100%; min-width: 100%; background-image: linear-gradient(to top right, pink, white); opacity: 0.7; z-index: 4; -webkit-transition: opacity 4s ease-in-out 3s; -moz-transition: opacity 4s ease-in-out 3s; -ms-transition: opacity 4s ease-in-out 3s; -o-transition: opacity 4s ease-in-out 3s; transition: opacity 4s ease-in-out 3s; } #gradient-bottom-right { margin: 0px; position: absolute; background-color: #000; min-height: 100%; min-width: 100%; background-image: linear-gradient(to top left, lightblue, white); opacity: 0.7; z-index: 5; -webkit-transition: opacity 6s ease-in-out 1s; -moz-transition: opacity 6s ease-in-out 1s; -ms-transition: opacity 6s ease-in-out 1s; -o-transition: opacity 6s ease-in-out 1s; transition: opacity 6s ease-in-out 1s; }

 <div id="canvas"> <div id="colors">&nbsp;</div> <div id="gradient-top-left">&nbsp;</div> <div id="gradient-top-right">&nbsp;</div> <div id="gradient-bottom-left">&nbsp;</div> <div id="gradient-bottom-right">&nbsp;</div> </div>