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

问题描述

因此，基本上，我正在尝试创建进度条。在此示例中，我将仅将使用的颜色更改为red，green和blue，因为显然比十六进制值的加载更容易理解。实际上，我要为进度栏设置RGB渐变背景，以给人一种渐变从左向右移动的印象，以表示仍有活动（即该站点尚未冻结）。我已经尝试了几件事，首先设置background: linear-gradient(120deg,red,green,blue)并为background-position CSS属性设置动画以模拟渐变运动。但是，一旦在动画结束时，进度条就会从基本上是蓝色（即渐变的末尾）跳到绿色，然后跳回绿色...然后我尝试以rgbgr的形式手动反映渐变-即background: linear-gradient(120deg,blue,red)，虽然看起来更好，但仍然有跳动感。最后，我尝试使用repeating-linear-gradient CSS函数-即background: repeating-linear-gradient(120deg,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);
    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中是可能的。如果有人能指出正确的方向，我将不胜感激。谢谢！

解决方法

您需要将动画运行更长的时间，然后再循环播放。

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

我也将渐变角更改为90deg，因为初始值使渐变的开始和结束不太匹配

/* instead of 120deg */
background: repeating-linear-gradient(90deg,red,green,blue,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);
    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>

,

您可以像下面那样进行操作，并且可以在任何角度下使用：

body {
  background: #222;
}

.wrapper {
  --d:100px;
  --angle:120deg; 
  --sinus:0.866; /* = sinus(angle) */
  
  height: 50px;
  width: 400px;
  position: relative;
  z-index:0;
  background: #131313;
  text-align: center;
  line-height:50px;
  color: white;
  margin:5px;
}

.wrapper::before {
  content:"";
  height: 100%;
  left:0;
  width:var(--w);
  position: absolute;
  z-index:-1;

  background: repeating-linear-gradient(var(--angle),red var(--d));
  background-size: calc(var(--d)/var(--sinus)) 100%;
  animation: AnimationName 2s linear infinite reverse;
}

@keyframes AnimationName {
  0% {
    background-position: calc(var(--d)/var(--sinus)) 0;
  }
}

<div class="wrapper" style="--w:50%;">
  Downloading 5 of 10
</div>

<div class="wrapper" style="--w:70%;--d:200px;--angle:45deg;--sinus:0.707">
  Downloading 5 of 10
</div>

<div class="wrapper" style="--w:80%;--d:50px;--angle:-30deg;--sinus:0.5">
  Downloading 5 of 10
</div>