我無法讓漸變在沒有語法錯誤的情況下正確地橫向循環。

我也試著改變漸變的角度。這是一個彩虹漸變背景，很神奇。

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%}
}

若要橫向而不是縱向循環漸變，您可以修改@keyframes規則中的“背景位置”屬性，并指定漸變的方向。在這個更新的代碼中，background-position屬性設置為200% 0，這意味著漸變背景將從右向左水平滾動。此外，background-size屬性設置為200% 100%,以確保背景覆蓋HTML元素的整個寬度和高度。以及通過向右添加來指定梯度的方向，

html {
    min-height: 100%;
    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%
    );

    background-size: 200% 100%;
    animation: a 2s linear infinite;
}

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