文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS背景梯度有nast线切断它。

问CSS背景梯度有nast线切断它。
EN

Stack Overflow用户

提问于 2017-09-16 23:52:55

回答 2查看 474关注 0票数 1

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

https://codepen.io/jonathansafa/pen/pWjvoO

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

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-17 00:05:35

这是因为渐变以不同的颜色开始和结束(以#165730开头，以#185a9d结尾)。如果你想在没有这条线的情况下顺利过渡，你需要用相同的颜色开始并完成你的渐变。下面是工作小提琴：https://jsfiddle.net/7dvovgr7/

还有片段：

.background{position:absolute;top:0px;right:0px;bottom:0px;left:0px; z-index: -1;}
.awesomeBG {
  background: linear-gradient(to left, #165730, #185a9d, #165730, #185a9d, #165730);
  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 }
}

<body>
  <div class="background awesomeBG"></div>
</body>

票数 1

Stack Overflow用户

发布于 2017-09-17 00:06:00

没什么不对的。好像你刚刚发现了密码上的漏洞。

你自己看吧。

.background{
  display: flex;
  position:absolute;top:0px;right:0px;bottom:0px;left:0px; z-index: -1;}
.awesomeBG {
  background: linear-gradient(to left, #165730, #185a9d, #165730, #185a9d, #165730); /*make sure you start and end with the same color*/
  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 }
}

<body>
  <div class="background awesomeBG"></div>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46259462

复制

相似问题

问CSS背景梯度有nast线切断它。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS背景梯度有nast线切断它。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS背景梯度有nast线切断它。
EN