css - 仅将线性渐变动画应用于网格/网格叠加层

Question

我正在为我的一个想法而绞尽脑汁，也许我处理它完全错误并且可以使用其他一些输入/想法。

想法是将动画渐变仅应用于网格/网格线。

这是我现在拥有的代码笔: 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 渐变仅应用于线条/网格，背景可以是任何东西。线性渐变应该变成动画。

任何有关如何解决此问题的帮助或想法都会非常好。

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