如何使用CSS实现彩虹渐变条纹的连续循环动画效果

你现有渐变首尾均为红色，天然支持无缝循环效果，仅需补充背景尺寸配置和位移动画即可实现和示例一致的流动效果，完整实现代码如下：

/* 给需要添加效果的元素加以下样式 */
.rainbow-animation {
  /* 你原有的静态彩虹渐变代码 */
  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%);
  /* 将渐变背景横向拉伸为2倍容器宽度 */
  background-size: 200% 100%;
  /* 绑定动画：动画名 时长 匀速 无限循环 */
  animation: rainbowLoop 5s linear infinite;
}

/* 定义渐变位移动画 */
@keyframes rainbowLoop {
  0% {
    background-position: 0 0;
  }
  100% {
    /* 向左移动一整个渐变长度，首尾红色衔接无卡顿 */
    background-position: -200% 0;
  }
}

参数调整说明 #

• 动画速度：修改animation属性里的5s参数，数值越大动画流动速度越慢，反之越快
• 流动方向：如果需要反向流动，把100%帧的background-position改为200% 0即可
• 倾斜适配：如果后续修改了渐变的角度，可对应调整background-size的宽高比例，保证流动时没有断层

内容的提问来源于stack exchange，提问作者Peanut Jams