如何在 CSS 中为流过背景图像的渐变的涟漪效果制作动画

Question

不完全是 pulse animation——但有点相似（不是径向的，而是 线性的）——我正在尝试在 CSS 中，如果您转动一块玻璃并看到一条光带掠过它，就会产生某种镜头光晕的效果。假设您在 CSS 中有一个常规背景图像 或一个无缝重复背景图像 。现在你想在该图像上设置一个矩形光带的动画，它是一种 "fade-in ... full light ... fade-out" 白光渐变。所以你有一个类似 transparent, semi-transparent-white, white, semi-transparent-white, transparent 的线性渐变流过背景图像（seamless/repeating 背景图像，或常规背景图像），重复流过，就像它是一个不断运动的水池。

想知道这种事情在 CSS 中是否可行，以及如何实现。

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

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

Answer 1

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

.ripple{
  width: 50px;
  height: 50px;
  display: block;
  position: relative;
  
  background-color: #00ccff;
  
  border-radius: 100%;
  
  opacity: 0.5;
}
.ripple:before, .ripple:after{
  content: '[=10=]20';
  
  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;
  }
}

<label class="ripple"></label>

Answer 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

如何在 CSS 中为流过背景图像的渐变的涟漪效果制作动画

How to animate a ripple effect of a gradient flowing across a background image in CSS

css

linear-gradients

css-animations