CSS: 重复动画背景

Question

我正在尝试创建一个由两部分组成的重复背景。每个部分都是一个渐变，一个向上移动，另一个向下移动。

我得到的最好的是：

html {
  background: black;
  color: #4c4c4c;
}

body {
  margin: 30vh auto;
  max-width: 80vw;
}

.wave {
  background: none;
  height: 1rem;
  width: 50%;
  position: absolute;
  z-index: 2;
  animation: move 700ms 0ms steps(2) infinite both;
}

.color::after,
.color::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  top: 0;
}

.color {
  background-image: linear-gradient(#fe0000 50%, #6531ff 0 100%);
}

.color::after {
  background: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
}

.wave,
.color::after,
.color::before {
  background-size: 5rem 1rem;
  background-repeat: repeat-x;
}

@keyframes move {
  0% {
    margin-top: -3rem;
  }
  100% {
    margin-top: -3.25rem;
  }
}

<div class="color wave"></div>

我明白为什么这不起作用，但不确定如何继续。

由于难以描述，这里是我正在寻找的图像：

起初（位置1），所有奇数块都高于偶数块。第一个动画之后，反过来（位置2）等等。

Answer 1

更新：这是一个有趣的问题。我很惊讶地发现我没有明显或特别优雅的解决方案来在水平间隙重复时垂直梯度运行。

比我最初预期的要难以捉摸得多。

我能想到的最好办法是将其中一个渐变放在伪元素中并应用蒙版图像。这在 IE 中不起作用，但在其他任何地方 appears to be supported。

请参阅下面的更新演示。

如果我明白你想做什么，我想你可以通过动画背景位置来完成它：

.demo {  
  height: 200px;
  background-image: 
    linear-gradient(#f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%);
  animation: move 0.7s infinite alternate;
  background-size: 3rem;
  position: relative;
}

.demo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(#042a2b, transparent);
  
  /* This is the magic part: using a horizontal repeating-linear-gradient
  to mask out "columns", allowing the container's background gradient to
  show through */
  -webkit-mask-image: repeating-linear-gradient(to right, black 0 3rem, transparent 3rem 6rem);
  
  background-size: 3rem;
  
  /* run the same animation in reverse to animate up instead of down */
  animation: move 0.7s infinite alternate-reverse;
}

@keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position:
      0 200px;
  }
}

<div class="demo"></div>

Answer 2

很难准确推断出您要做什么，但这是另一个示例（与非常相似），它将第一个背景向下移动而第二个背景向上移动：

.sample {
    width: 250px;
    height: 50px;
    position: relative;
    background-image: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
    animation: move 1s infinite linear;
}
@keyframes move {
  0%, 100% {
    background-position: 0 -75px, 0 0;
  }
  50% {
    background-position: 0 0, 0 -75px;
  }
}

<div class="sample"></div>

Answer 3

可能像下面这样：

.box {
  height:100px;
  background:linear-gradient(red,blue,yellow,red) 0 0/100% 200%;
  animation:y 2s linear infinite;
}
.box::after {
  content:"";
  display:block;
  height:100%;
  background:linear-gradient(green,lightblue,pink,green) 0 0/100% 200%;
  animation:inherit;
  animation-direction: reverse;
  -webkit-mask:linear-gradient(90deg,#fff 50%,transparent 0) 0 0/20% 100%;
}

@keyframes y {
  to {
    background-position:0 -200%;
  }
}

<div class="box"></div>

CSS: 重复动画背景

CSS: repeated animated background

css

css-animations

background-image

linear-gradients