Question

我试图制作一个简单的下载栏，但结果是只有纯色而没有过渡动画。另外，“重复线性梯度”不起作用，我不明白为什么。

希望您能帮上忙。谢谢！

.Download {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  /*background: repeating-linear-graient (90deg, blue, red, 100px);*/
  background: linear-gradient(to left, blue, red);
  animation-name: download;
  animation-direction: 10s;
  animation-timing-function: linear;
  animation-direction: normal;
}

@keyframes download {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

<div class="Download">
</div>

Answer 1

您可以使用伪代码来实现这一目标。

.Download {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.Download:after {
  content: "";
  position: absolute;
  background-image: linear-gradient(to left, blue, red);
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  animation: download 5s;
}

@keyframes download {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}

<div class="Download">
</div>

Answer 2

您需要使线性渐变的一半透明（位列表以防止最后出现孔）。将背景位置x设置为100％，仅显示透明部分。然后动画为0：

fontMetrics (highcharts.src.js#7352)
layOutTitles (highcharts.src.js#26291)
each (highcharts.src.js#2270)
layOutTitles (highcharts.src.js#26279)
setTitle (highcharts.src.js#26259)
render (highcharts.src.js#27293)
firstRender (highcharts.src.js#27588)
init (highcharts.src.js#25734)
fireEvent (highcharts.src.js#2533)
init (highcharts.src.js#25607)
getArgs (highcharts.src.js#25578)
Chart (highcharts.src.js#25498)
chart (highcharts.src.js#25547)
init (fishtrack4_OSM.js#782)
(anonymous) (fishtrack4_OSM.js#912)
j (jquery.js#2)
fireWith (jquery.js#2)
ready (jquery.js#2)
J (jquery.js#2)

.Download {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  background: linear-gradient(to right, red 0, blue 50.02%, transparent 50.02%) no-repeat;
  animation: download 10s forwards;
  background-position: 100% 0;
  background-size: 200% 100%;
}

@keyframes download {
  to {
    background-position: 0 0;
  }
}

简单的加载栏

2 个答案: