对角无缝滚动彩虹背景

Question

我正在使用Temani从CSS彩虹渐变循环动画得到的答案，效果很好，但我希望背景对角滚动（-45度），而不是水平或垂直滚动。我已经弄清楚如何改变渐变的方向以及如何使其发挥作用，但是渐变不对齐的地方有明显的接缝。我怎样才能改变它以使其“无缝”？

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

    animation: a 2s linear infinite;
}

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

Answer 1

嗯，我不知道为什么它必须是 33.33% 或 1/3 的大小才能使其看起来无缝，但我想如果它有效的话它就有效。只需将渐变和大小加倍并调整动画位置即可。

html {
    min-height:100%;
    background: linear-gradient(
            -45deg,
            rgba(255, 0, 0, 1) 0%,
            rgba(255, 154, 0, 1) 5%,
            rgba(208, 222, 33, 1) 10%,
            rgba(79, 220, 74, 1) 15%,
            rgba(63, 218, 216, 1) 20%,
            rgba(47, 201, 226, 1) 25%,
            rgba(28, 127, 238, 1) 30%,
            rgba(95, 21, 242, 1) 35%,
            rgba(186, 12, 248, 1) 40%,
            rgba(251, 7, 217, 1) 45%,
            rgba(255, 0, 0, 1) 50%,
            rgba(255, 154, 0, 1) 55%,
            rgba(208, 222, 33, 1) 60%,
            rgba(79, 220, 74, 1) 65%,
            rgba(63, 218, 216, 1) 70%,
            rgba(47, 201, 226, 1) 75%,
            rgba(28, 127, 238, 1) 80%,
            rgba(95, 21, 242, 1) 85%,
            rgba(186, 12, 248, 1) 90%,
            rgba(251, 7, 217, 1) 95%,
            rgba(255, 0, 0, 1) 100%
        );
    background-size: 400% 400%;
    background-position: bottom right;

    animation: a 2s linear infinite;
}

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