如何实现从左上到右下的流动彩虹渐变并解决异常竖线问题

问题核心 #

使用斜向线性渐变配合背景位置动画时，因渐变首尾颜色不连续、背景尺寸不足，导致滚动时出现竖线断层，无法实现流畅的左上到右下流动效果。

修复方案 #

通过调整渐变颜色节点、扩大背景尺寸、匹配动画方向三个关键点，解决竖线问题并实现流畅流动：

• 让渐变首尾颜色无缝衔接：在渐变末尾添加与起始色一致的透明红色，避免滚动时颜色断层。
• 扩大渐变背景尺寸：将background-size设为200% 200%，让渐变覆盖更大范围，滚动时可视区域内始终是连续的渐变段。
• 匹配斜向动画方向：修改background-position的动画路径，实现左上到右下的斜向滚动，而非单纯上下移动。

修复后的完整代码 #

.container {
    position: relative;
    width: 400px;
    height: 440px;
    overflow: hidden;
    background-color: black;
}

.image {
    background: url(https://psxgems.com/system/cron/apisaves/Images/14968251919.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.gradient {
    background: linear-gradient(135deg, 
        rgba(255,0,0,0) 0%, 
        rgba(255,0,0,0.6) 20%, 
        rgba(255,127,0,0.6) 40%, 
        rgba(255,255,0,0.6) 60%, 
        rgba(0,255,0,0.6) 80%, 
        rgba(0,0,255,0.06) 95%, 
        rgba(255,0,0,0) 100%);
    background-size: 200% 200%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mask-image: url(https://psxgems.com/system/cron/apisaves/Images/14968251919.jpg);
    mask-size: cover;
    mask-position: center;
    mask-repeat: no-repeat;
    animation: colorscroll 4s linear infinite;
}

@keyframes colorscroll {
    from { background-position: -100% -100%; }
    to { background-position: 0 0; }
}

<div class="container">
    <div class="image"></div>
    <div class="gradient"></div>
</div>

原理说明 #

原代码中，斜向渐变背景尺寸与容器一致，上下滚动时渐变边缘会和下一个平铺的渐变衔接，由于首尾颜色差异明显，直接出现竖线断层。扩大背景尺寸后，滚动时可视区域内始终显示渐变的连续部分；首尾颜色匹配则确保即使出现衔接，也不会有明显的颜色跳变，最终实现流畅的左上到右下彩虹流动效果。

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