html - 如何在 CSS 中的背景上移动径向渐变(光点)？

Question

我正在开发一个交互式触摸屏，它在主屏幕上有四个看起来很像 Windows Logo 的图 block 。目前它们是不同的静态颜色，它们看起来并不“生动”和互动。我想让它们在随机区域和间隔内发光或轻微脉动。我想过创建一个白色的径向渐变并在每个图 block 的外部随机移动它，以便图 block 渐变发生变化，但是，我不确定如何在 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>

Updated fiddle.

#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>