如何在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>