CSS彩虹渐变循环动画答案

【问题标题】：CSS rainbow gradient loop animationCSS彩虹渐变循环动画
【发布时间】：2021-12-28 12:31:16
【问题描述】：

正在尝试找到一种方法来创建 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%);

图片：

感谢阅读。

【问题讨论】：

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

标签： css colors linear-gradients

【解决方案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%}
}

【讨论】：