如何在 CSS 中对流经背景图像的渐变的涟漪效果进行动画处理答案

【问题标题】：How to animate a ripple effect of a gradient flowing across a background image in CSS如何在 CSS 中对流经背景图像的渐变的涟漪效果进行动画处理
【发布时间】：2019-12-06 09:12:12
【问题描述】：

不完全是pulse animation——但有点相似（不是径向的，而是线性的）——我正在尝试创建一种镜头光晕的效果如果你转动一块玻璃，在 CSS 中看到一条光带划过它。假设您在 CSS 中有一个常规的背景图像，或无缝重复的背景图像。现在，您想要在该图像上设置一个矩形光带的动画，这是一种“淡入……全光……淡出”的白光渐变。所以你有一个类似transparent, semi-transparent-white, white, semi-transparent-white, transparent 的线性渐变类型，它流过背景图像（无缝/重复背景图像，或常规背景图像），反复流过，就像是一个不断运动的水池。

想知道这种事情在 CSS 中是否可行，以及如何做到这一点。

也许它只是一个动画线性渐变蒙版（我不熟悉但听说过）。不确定。

基本上是像这样为半透明线性渐变设置动画（只是线条部分，想象它是一个简单的矩形）。

【问题讨论】：

标签： css css-animations linear-gradients

【解决方案1】：

不确定这是否是您要查找的内容。这是一个镜头！

.ripple{
  width: 50px;
  height: 50px;
  display: block;
  position: relative;
  
  background-color: #00ccff;
  
  border-radius: 100%;
  
  opacity: 0.5;
}
.ripple:before, .ripple:after{
  content: '\0020';
  
  width: 0;
  height: 0;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  border-radius: 100%;
  border: 2px solid #0088ee;
  
  transform: translate(-50%, -50%);
}

.ripple:before{
    animation: ripple-one 2.5s infinite;
}
.ripple:after{
    animation: ripple-one 3.5s infinite;
}

@keyframes ripple-one{
  0%{
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}


@keyframes ripple-two{
  0%{
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

&lt;label class="ripple"&gt;&lt;/label&gt;

【讨论】：

很好，但我正在寻找线性渐变，我已经更新了问题:)

【解决方案2】：

您是否正在寻找类似以下的内容：

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(to right,transparent 33%,white,transparent 66%),
    url(https://picsum.photos/id/10/800/800) center;
  background-size:300% 100%,cover;
  animation:change 2s linear infinite;
}

@keyframes change {
  from { /*Use "to" to change the direction */
    background-position:right,center;
  }
}

html {
 background:#fff;
}

相关获取更多计算详情：Using percentage values with background-position on a linear gradient

【讨论】：