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