仅将线性渐变动画应用于 mesh/grid 叠加层

Question

我正在为我的一个想法而伤脑筋，也许我处理它完全错误，可以使用其他一些 input/ideas。

想法是将动画渐变仅应用于 mesh/grid 行。

这是我现在所拥有的代码笔： https://codepen.io/monsmado/pen/ewRgOR

html {
  overflow: hidden;
  font-weight: 100;
}

#pattern {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 1) 0px, transparent 1px), 
    linear-gradient(90deg, rgba(255, 255, 255, 1) 0px, transparent 1px);
  background-size: 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  height: 100%;
  width: 100%;
  position: absolute;
  margin: -8px;
}

body {
  background: linear-gradient(270deg, #246655, #662464);
  background-size: 400% 400%;
  animation: AnimationName 5s ease infinite;
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

<div id="pattern"></div>

我想不出如何将动画渐变应用于网格。也许使用 css 图层蒙版之类的。我找到了一些其他解决方案，适用于某些 java-脚本和 canvas，但我还不太熟悉 canvas。

这是一张示例图片，它应该是这样的：https://imgur.com/a/vAIHG1d 渐变仅应用于 lines/grid，背景可以是任何东西。线性渐变应该变成动画。

任何帮助或想到如何解决这个问题都会非常好。

Answer 1

你可以考虑mask-image这样做。您将需要创建两个图层，其中蒙版将是一个 repeating-linear-gradient ，只保留线条可见。第一层为水平的，第二层为垂直的：

body {
  margin: 0;
  height: 100vh;
  background: url(https://picsum.photos/id/1019/1000/800) center/cover;
}

body:before,
body:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to left, purple, green, orange);
  background-size: 400% 100%;
  animation: AnimationName 2s ease infinite alternate;
}
body:before {  
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 19px, #fff 19px 20px);
  mask-image: repeating-linear-gradient(to bottom, transparent 0 19px, #fff 19px 20px);
}
body:after {  
  -webkit-mask-image: repeating-linear-gradient(to right, transparent 0 19px, #fff 19px 20px);
  mask-image: repeating-linear-gradient(to right, transparent 0 19px, #fff 19px 20px);
}

@keyframes AnimationName {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

或者像下面这样使用多重掩码：

body {
  margin: 0;
  height: 100vh;
  background: url(https://picsum.photos/id/1019/1000/800) center/cover;
}

body:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to left, purple, green, orange);
  background-size: 400% 100%;
  animation: AnimationName 2s ease infinite alternate;
  -webkit-mask: 
    repeating-linear-gradient(to bottom, transparent 0 19px, #fff 19px 20px),
    repeating-linear-gradient(to right,  transparent 0 19px, #fff 19px 20px);
  mask: 
    repeating-linear-gradient(to bottom, transparent 0 19px, #fff 19px 20px),
    repeating-linear-gradient(to right,  transparent 0 19px, #fff 19px 20px);
}

@keyframes AnimationName {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

仅将线性渐变动画应用于 mesh/grid 叠加层

Apply linear-gradient animation to mesh/grid overlay only

css

linear-gradients

css-animations