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 渐变仅应用于线条/网格，背景可以是任何东西。线性渐变应该变得生动起来。

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

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

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

1 个答案: