如何创建背景效果

Question

首先，如果问题太宽泛而无法回答，我深表歉意，但我只需要方法的方向。 如何创建像（红色条纹背景）这样的背景动画：link

我正在学习css动画，想知道我可以接近的方向来获得这样的效果。

Answer 1

它们并没有真正为所有类型的漩涡设置动画，而是让你在脑海中认为它的模式。这是一个上下动画的背景图像:)

以图像为背景的可能解决方案（但任何移动都可以）：

#example{
  background-image: url('https://trionndesign.com/images/creativeBg.jpg');
  animation-name: backgroundscroller;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes backgroundscroller {
   from { background-position:    0  0; }
   to {   background-position:  100% 0; }
}

---

许多非无休止重复的动画都与之前和之后一起工作。它以 0 滚动开始，以 100% 滚动结束。或 0 不透明度到 1 不透明度。诀窍是弄清楚他们正在制作动画的属性是什么，并使用 css'transition 应用它。

如果是无穷无尽的动画，你需要像上面这样更高级的例子。