我对编程还是比较陌生的（不到三个月前开始学习Web开发），但是已经尝试创建一个相当复杂的（至少对我来说）进度条。
我需要这个进度条，不仅要在页面加载后立即自动从左向右移动的同时更改颜色-我已经在互联网上看到有关如何做到这些的解释。
但是，一旦完成，我需要每个部分的颜色（例如，每个10％）保持不变。因此，例如，如果前10％为浅红色，接下来的10％为深红色，等等...它会在动画时自动通过它们，但是随后保持静态，仍然看到不同的颜色，而不仅仅是最后一个纯色。
到目前为止，我发现这样做的唯一方法是创建许多不同的条形图，每个条形图具有不同的z索引，但是我很清楚这是很复杂的，可能不是实现这一点的最有效方法。
就像我说的那样，我是新手，所以请保持谨慎:)我将在下面显示我的代码。如果有人有更好的建议，我将如何在同一栏中获得不同的分色，我想学习一些新知识！
谢谢！
HTML：
<div class="meter">
<span id="rd1" style="width: 5%"><p></p></span>
<span id="rd2" style="width: 10%"><p></p></span>
<span id="rd3" style="width: 15%"><p></p></span>
<span id="rd4" style="width: 20%"><p></p></span>
<span id="rd5" style="width: 25%"><p></p></span>
<span id="rd6" style="width: 30%"><p></p></span>
<span id="rd7" style="width: 35%"><p></p></span>
<span id="rd8" style="width: 40%"><p></p></span>
<span id="rd9" style="width: 45%"><p></p></span>
<span id="rd10" style="width: 50%"><p></p></span>
<span id="rd11" style="width: 55%"><p></p></span>
<span id="rd12" style="width: 60%"><p></p></span>
<span id="rd13" style="width: 65%"><p></p></span>
<span id="rd14" style="width: 70%"><p></p></span>
<span id="rd15" style="width: 75%"><p></p></span>
<span id="rd16" style="width: 80%"><p></p></span>
<span id="rd17" style="width: 85%"><p></p></span>
<span id="rd18" style="width: 90%"><p></p></span>
<span id="rd19" style="width: 95%"><p></p></span>
<span id="rd20" style="width: 100%"><p></p></span>
</div>
CSS：
`@keyframes color{
0% {
background-color: hsl(315, 100%, 75%);
width: 5%;
}
5% {
background-color: hsl(315, 100%, 70%);
width: 10%;
}
10% {
background-color: hsl(315, 100%, 65%);
width:15%;
}
15% {
background-color: hsl(315, 100%, 60%);
width: 20%;
}
20% {
background-color: hsl(315, 100%, 55%);
width: 25%;
}
25% {
background-color: hsl(315, 100%, 50%);
width: 30%;
}
30% {
background-color: hsl(320, 100%, 50%);
width:35%;
}
35% {
background-color: hsl(325, 100%, 50%);
width: 40%;
}
40% {
background-color: hsl(330, 100%, 50%);
width: 45%;
}
45% {
background-color: hsl(335, 100%, 50%);
width: 50%;
}
50% {
background-color: hsl(340, 100%, 50%);
width:55%;
}
55% {
background-color: hsl(345, 100%, 50%);
width: 60%;
}
60% {
background-color: hsl(350, 100%, 50%);
width: 65%;
}
65% {
background-color: hsl(355, 100%, 50%);
width: 70%;
}
70% {
background-color: hsl(360, 100%, 50%);
width:75%;
}
75% {
background-color: hsl(360, 95%, 50%);
width: 80%;
}
80% {
background-color: hsl(360, 90%, 50%);
width: 85%;
}
85% {
background-color: hsl(360, 85%, 50%);
width: 90%;
}
90% {
background-color: hsl(360, 80%, 50%);
width:95%;
}
95% {
background-color: hsl(360, 75%, 50%);
width: 100%;
}
}
.meter {
height: 20px;
position: relative;
top: 100px;
background: grey;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
#rd1 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 75%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 4px;
overflow: hidden;
z-index: 20;
animation: color 4s linear 0s alternate;
}
#rd2 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 70%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 32px;
overflow: hidden;
z-index: 19;
animation: color 4s linear 0s alternate;
}
#rd3 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 65%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 60px;
overflow: hidden;
z-index: 18;
animation: color 4s linear 0s alternate;
}
#rd4 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 60%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 88px;
overflow: hidden;
z-index: 17;
animation: color 4s linear 0s alternate;
}
#rd5 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 55%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 116px;
overflow: hidden;
z-index: 16;
animation: color 4s linear 0s alternate;
}
#rd6 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 144px;
overflow: hidden;
z-index: 15;
animation: color 4s linear 0s alternate;
}
#rd7 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(320, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 172px;
overflow: hidden;
z-index: 14;
animation: color 4s linear 0s alternate;
}
#rd8 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(325, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 200px;
overflow: hidden;
z-index: 13;
animation: color 4s linear 0s alternate;
}
#rd9 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(330, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 228px;
overflow: hidden;
z-index: 12;
animation: color 4s linear 0s alternate;
}
#rd10 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(335, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 256px;
overflow: hidden;
z-index: 11;
animation: color 4s linear 0s alternate;
}
#rd11 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(340, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 284px;
overflow: hidden;
z-index: 10;
animation: color 4s linear 0s alternate;
}
#rd12 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(345, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 312px;
overflow: hidden;
z-index: 9;
animation: color 4s linear 0s alternate;
}
#rd13 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(350, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 340px;
overflow: hidden;
z-index: 8;
animation: color 4s linear 0s alternate;
}
#rd14 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(355, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 368px;
overflow: hidden;
z-index: 7;
animation: color 4s linear 0s alternate;
}
#rd15 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(360, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 396px;
overflow: hidden;
z-index: 6;
animation: color 4s linear 0s alternate;
}
#rd16 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(360, 95%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 424px;
overflow: hidden;
z-index: 5;
animation: color 4s linear 0s alternate;
}
#rd17 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(360, 90%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 452px;
overflow: hidden;
z-index: 4;
animation: color 4s linear 0s alternate;
}
#rd18 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(360, 85%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 480px;
overflow: hidden;
z-index: 3;
animation: color 4s linear 0s alternate;
}
#rd19 {
display: block;
height: 140%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(360, 80%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 508px;
overflow: hidden;
z-index: 2;
animation: color 4s linear 0s alternate;
}
#rd20 {
display: block;
height: 140%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(360, 75%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 0px 0px rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 536px;
overflow: hidden;
z-index: 1;
animation: color 4s linear 0s alternate;
}
@-webkit-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: -100px 0px, 0 0, 0 0}
}