如何在CSS的背景上四處移動徑向漸變（光斑）？

Question

我在工作時正在開發一個交互式觸摸屏，該觸摸屏在主屏幕上具有四個類似於Windows徽標的圖塊。 目前，它們是不同的靜態顏色，看起來不“活躍”且不具有交互性。 我想讓它們在隨機區域和間隔中略微發光或搏動。 我考慮過要創建一個白色的徑向漸變，並在每個圖塊的外部隨機移動它，以便圖塊漸變發生變化，但是，我不確定如何在CSS中進行編碼。

我試圖改編一些使用徑向漸變動畫的復制代碼，這些動畫在整個色相漸變之間循環。 問題是我不想更改顏色，因為它們形成了文本的背景（可能使對比度混亂）。 從深色到非常亮的變化也可能非常戲劇化，這又使文本的對比度混亂。

我已經嘗試過線性漸變，但是對此感到不滿意，因為它相當可預測且無聊（來回相同的漸變）。

理想情況下，我需要的是這樣的東西：

這是當前正在運行的代碼片段：

 body,html{ margin:0; padding:0; height:100%; } .box{ height:100%; width:100%; } .gradDynamic{ position:relative; } .gradDynamic:after, .gradDynamic:before{ position:absolute; top:0; bottom:0; left:0; right:0; content:""; z-index:-1; } .gradDynamic:after{ background:radial-gradient(circle,red,transparent); background-size:400%; animation:colorSpin 30s linear infinite; } .gradDynamic:before{ background-color:yellow; } @keyframes colorSpin{ 25%{background-position:0 100%} 50%{background-position:100% 100%} 75%{background-position:100% 0} 100%{filter:hue-rotate(360deg)} } 

 <div class="box gradDynamic"></div> 

Answer 1

我已經實現了帶有線性漸變背景的動畫背景。 讓我們嘗試這個示例並發表評論以尋求進一步的幫助。

 .gradient { height: 400px; width: 100%; background: linear-gradient(180deg, #1846c4, #98b2ff, #1846c4); background-size: 200% 200%; -webkit-animation: Animation 8s ease infinite; -moz-animation: Animation 8s ease infinite; animation: Animation 8s ease infinite; } @-webkit-keyframes Animation { 0% { background-position: 10% 0%; } 50% { background-position: 91% 100%; } 100% { background-position: 10% 0%; } } @-moz-keyframes Animation { 0% { background-position: 10% 0%; } 50% { background-position: 91% 100%; } 100% { background-position: 10% 0%; } } @keyframes Animation { 0% { background-position: 10% 0%; } 50% { background-position: 91% 100%; } 100% { background-position: 10% 0%; } } 

 <div class="gradient"></div> 

更新了小提琴。

 #demo { width: 100%; height: 300px; position: relative; background: linear-gradient(to bottom, #3bd6f7 0%, #1539b9 100%); z-index: 2; } #demo:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ""; z-index: -1; } #demo::after { background-size: 400%; background-size: 400%; animation: colorSpin 40s linear infinite; background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.1), transparent); } #demo::after { background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.1), transparent); } @keyframes colorSpin { 25% { background-position: 0 100% } 50% { background-position: 100% 100% } 75% { background-position: 100% 0 } 100% { filter: hue-rotate(360deg) } } #demo::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(to top, #1539b9 0%, #1539b9 100%); opacity: 0; animation: bg 2800ms ease-in-out 3s infinite alternate-reverse; z-index: -1; } @keyframes bg { 0% { opacity: 0; } 100% { opacity: 1; } } 

 <div id="demo">Demo</div>