如何在CSS中实现背景图上渐变的涟漪效果动画

Question

不完全像脉冲动画，但有些类似（不是径向的，而是线性的）--我正在尝试在CSS中创建一种镜头耀斑效果，就像你转动一块玻璃并看到一条光带横扫过去。所以说你有一个常规的背景图像，在CSS中有一个无缝重复的背景图像。现在你想要在这个图像上面动画播放一个矩形的光带，它是一种白光的“淡入...全亮...淡出”渐变效果。因此，你有一个线性渐变，类似于透明、半透明白色、白色、半透明白色、透明，它流过背景图像（无缝/重复背景图像或常规背景图像），像一个不停运动的水池一样反复流动。

想知道这种效果在CSS中是否可能，并且如何做到。

也许只是一个动态的线性渐变遮罩（我不熟悉但听说过）。不确定。

基本上就是像这样动画播放一个半透明的线性渐变（只是线的部分，并且想象它是一个简单的矩形）。

- Lance

Answer 1

你是否在寻找如下内容：

你是否想要以下这些东西：

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;
}

相关详细计算信息请参考：使用线性渐变的背景位置百分比值

- Temani Afif

Answer 2

我不确定这是否是您要寻找的。这就是一次尝试！原始答案翻译成"最初的回答"。

.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;
  }
}

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

- Gacci

---

不错，但我正在寻找线性渐变，我已更新问题 :) - Lance