CSS 彩虹渐变循环动画

Question

尝试找到一种创建CSS彩虹条纹动画循环的方法...类似于这样：

目前只能创建一个彩虹条纹的图像，但是不确定如何使用CSS创建与gif中连续的动画。

background: linear-gradient(-45deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);

图片： 谢谢阅读。

- Peanut Jams

---

看看Manuel Pinto的例子 https://1stwebdesigner.com/15-css-background-effects/ - MFerguson

Answer 1

您可以尝试以下操作：

html {
  min-height:100%;
  background: 
   linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) 
   0 0/100% 200%;
   animation: a 2s linear infinite;
}

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

- Temani Afif

---

对于那些需要水平方向的彩虹效果的人，只需在linear-gradient()的第一个参数中使用to right即可，例如：linear-gradient(to right, rgba(255,0,0,1) 0%, ...)。 - ino

@ino 这还不够，我们只需要将位置更新为-200％0，大小更新为200％100％。 - Temani Afif