Html CSS背景渐变有nast线穿过。

我有一个全屏渐变背景的伟大网站。但在周期结束时，它有一条令人讨厌的线。我做错了什么

---

这是因为渐变以不同的颜色开始和结束（以

#165730

开始，以

#185a9d

结束）。如果你想在没有那条线的情况下获得平滑的过渡，你需要用相同的颜色开始和结束渐变。这是工作小提琴：

还有这个片段：

.background{位置：绝对；顶部：0px；右侧：0px；底部：0px；左侧：0px；z索引：-1；}
.令人敬畏的{
背景：线性梯度（向左，#165730，#185a9d，#165730，#185a9d，#165730）；
背景尺寸：600%100%；
动画：AwesomeBG 10s轻松无限；
溢出：隐藏；
}
@关键帧AwesomeBG{
0%{背景位置：0 0}
5%{背景位置：8%0}
13%{背景位置：15%0}
19%{背景位置：23%0}
25%{背景位置：30%0}
31%{背景位置：38%0}
38%{背景位置：45%0}
44%{背景位置：53%0}
50%{背景位置：60%0}
56%{背景位置：68%0}
63%{背景位置：75%0}
69%{背景位置：83%0}
75%{背景位置：90%0}
81%{背景位置：98%0}
88%{背景位置：105%0}
94%{背景位置：113%0}
100%{背景位置：120%0}
}

没有什么问题。 看起来你可能刚刚在代码笔上发现了bug

你自己看看吧

.background{
显示器：flex；
位置：绝对；顶部：0px；右侧：0px；底部：0px；左侧：0px；z索引：-1；}
.令人敬畏的{
背景：线性渐变（向左，#165730，#185a9d，#165730，#185a9d，#165730）；/*确保以相同的颜色开始和结束*/
背景尺寸：600%100%；
动画：AwesomeBG 10s轻松无限；
溢出：隐藏；
}
@关键帧AwesomeBG{
0%{背景位置：0 0}
5%{背景位置：8%0}
13%{背景位置：15%0}
19%{背景位置：23%0}
25%{背景位置：30%0}
31%{背景位置：38%0}
38%{背景位置：45%0}
44%{背景位置：53%0}
50%{背景位置：60%0}
56%{背景位置：68%0}
63%{背景位置：75%0}
69%{背景位置：83%0}
75%{背景位置：90%0}
81%{背景位置：98%0}
88%{背景位置：105%0}
94%{背景位置：113%0}
100%{背景位置：120%0}
}

.background{position:absolute;top:0px;right:0px;bottom:0px;left:0px; z-index: -1;}
.awesomeBG {
  background: linear-gradient(to left, #165730, #185a9d, #165730, #185a9d);
  background-size: 600% 100%;
  animation: AwesomeBG 10s ease infinite;
  overflow: hidden;
}

@keyframes AwesomeBG {
  0% { background-position:0 0 }
  5% { background-position:8% 0 }
  13% { background-position:15% 0 }
  19% { background-position:23% 0 }
  25% { background-position:30% 0 }
  31% { background-position:38% 0 }
  38% { background-position:45% 0 }
  44% { background-position:53% 0 }
  50% { background-position:60% 0 }
  56% { background-position:68% 0 }
  63% { background-position:75% 0 }
  69% { background-position:83% 0 }
  75% { background-position:90% 0 }
  81% { background-position:98% 0 }
  88% { background-position:105% 0 }
  94% { background-position:113% 0 }
  100% { background-position:120% 0 }
}