如何实现CSS渐变背景横向循环且不出现语法错误？

你当前的代码是纵向滚动的渐变效果，要改成横向循环，只需要调整3个核心参数：

• 给linear-gradient加上横向方向（比如to right），让渐变从左到右排列
• 修改背景尺寸为200% 100%，让背景在横向有足够的重复空间
• 动画里的背景位置改成横向偏移，从0 0移动到-200% 0

修改后的完整代码：

html {
    min-height: 100%;
    /* 加上to right设置横向渐变，背景尺寸改为200%宽 */
    background: linear-gradient(to right,
                              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/200% 100%;
    animation: a 2s linear infinite;
}

@keyframes a {
    /* 横向偏移-200%，让背景循环滚动 */
    to {background-position: -200% 0}
}

原理说明：

• 横向渐变让彩虹色从左到右分布，首尾都是红色，保证循环时颜色衔接无断层
• 背景宽度设为200%，相当于把渐变复制了一份，动画移动整个背景的宽度（-200%），刚好完成一次循环
• 线性动画linear保证滚动速度均匀，infinite让动画无限循环

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