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 脚本和画布的其他解决方案，但对画布还不是很熟悉。

这是它应该是什么样子的示例图像： https ://imgur.com/a/vAIHG1d 渐变仅应用于线条/网格，背景可以是任何东西。线性渐变应该变成动画的。

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

标签： csscss-animationslinear-gradients

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