html - CSS:如何创建无限移动的重复线性渐变？

Question

所以基本上，我正在尝试创建一个进度条。在这个例子中，我只是将我使用的颜色更改为 red , green和 blue相反，因为这显然比加载十六进制值更容易理解。实际上，我要让进度条具有这种 RGB 渐变背景，给人的印象是渐变从左向右移动，以表示仍有事件(即该站点尚未卡住)。我尝试了一些方法，从设置 background: linear-gradient(120deg, red, green, blue) 开始和动画 background-position CSS 属性来模拟渐变移动。然而，一旦在动画结束时，进度条从大部分为蓝色(即渐变的结尾)跳回绿色......然后我尝试以 rgbgr 的形式手动反射渐变。 - 即 background: linear-gradient(120deg, red, green, blue, green, red)而且，虽然这看起来更好，但仍然存在跳跃感。最后，我尝试使用 repeating-linear-gradient CSS 函数 - 即 background: repeating-linear-gradient(120deg, red, green, blue, green, red) .这是最接近我的目标，但在示例中，您可以看到渐变颜色“跳跃”，而不是平滑动画

html, body{
  height: 100%;
  background: #222;
  overflow: hidden;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
}

*{
  color: white;
  font-family: 'Tahoma', sans-serif;
}

#wrapper {
    height: 50px;
    width: 400px;
    position: relative;
    background: #131313;
}

p{
    text-align: center;
    position: absolute;
    width: 100%;
}

#bar {
    background: repeating-linear-gradient(120deg, red,green,blue, green, red);
    background-repeat:repeat-x;
    height: 100%;
    position: absolute;
    background-size: 400% 100%;
    -webkit-animation: AnimationName 3s linear infinite;
    -moz-animation: AnimationName 3s linear infinite;
    animation: AnimationName 3s linear infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

<div id="wrapper">
    <div id="bar" style="width: 50%"></div>
    <p>Downloading 5 of 10</p>
  </div>

我以前在很多网站上都看到过这种效果，所以我认为它在 CSS 中是可能的。如果有人能指出我正确的方向，我将不胜感激。谢谢!

Answer 1

在循环返回之前，您需要将动画运行更长时间。

@keyframes AnimationName {
    0%{background-position:100% 50%}
    100%{background-position:-33% 50%} /* instead of 0% 50% */
}

我还将渐变 Angular 更改为 90deg因为初始值使得梯度的开始和结束不太匹配

/* instead of 120deg */
background: repeating-linear-gradient(90deg, red,green,blue, green, red); 

html, body{
  height: 100%;
  background: #222;
  overflow: hidden;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
}

*{
  color: white;
  font-family: 'Tahoma', sans-serif;
}

#wrapper {
    height: 50px;
    width: 400px;
    position: relative;
    background: #131313;
}

p{
    text-align: center;
    position: absolute;
    width: 100%;
}

#bar {
    background: repeating-linear-gradient(90deg, red,green,blue, green, red);
    background-repeat:repeat-x;
    height: 100%;
    position: absolute;
    background-size: 400% 100%;
    animation: AnimationName 3s linear infinite;
}

@keyframes AnimationName {
    0%{background-position:100% 50%}
    100%{background-position:-33% 50%}
}

<div id="wrapper">
    <div id="bar" style="width: 50%"></div>
    <p>Downloading 5 of 10</p>
  </div>