我有这个CSS动画。进度栏从屏幕顶部到底部,我想反向它,因此它从屏幕的底部运行到顶部。
.meter9 {
position: absolute;
left: 80%;
top: 0%;
width: 5%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
.meter9 span {
display: block;
height: 100%;
}
.progress9 {
background-color: #d6185e;
animation: progressBar1 3s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes progressBar1 {
0% {
height: 0;
}
100% {
height: 100%;
}
}
<div class="meter9">
<span style="width:100%;"><span class="progress9"></span></span>
</div>
set:
position: absolute;
bottom: 0;
width: 100%;
至.meter9跨度,因此它将位于底部,并且会生长到顶部。
.meter9 {
top:0%;
left: 80%;
width: 5%;
height: 100%;
position: absolute;
overflow: hidden;
background-color: transparent;
}
.meter9 span {
display: block;
height: 100%;
position: absolute;
bottom: 0;
width: 100%;
}
.progress9 {
background-color: #d6185e;
animation: progressBar1 3s ease-in-out;
animation-fill-mode:forwards;
}
@keyframes progressBar1 {
0% { height: 0; }
100% { height: 100%; }
}
<div class="meter9">
<span style="width:100%;"><span class="progress9"></span></span>
</div>
我建议使用 display: flex;
align-items: flex-end;
项目将放在容器末端。您还可以使用这种方法轻松地创建多个进度栏。请参阅下面的示例。
.meter {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex; /*flexbox*/
align-items: flex-end; /*bottom to top*/
}
.progress {
flex: 1; /*grow*/
animation: progressBar ease-in-out forwards;
}
.progress:nth-child(1) {
background-color: #ff6b6b;
animation-duration: 1s;
}
.progress:nth-child(2) {
background-color: #51cf66;
animation-duration: 2s;
}
.progress:nth-child(3) {
background-color: #339af0;
animation-duration: 3s;
}
@keyframes progressBar {
0% {
height: 0;
}
100% {
height: 100%;
}
}
<div class="meter">
<span class="progress"></span>
<span class="progress"></span>
<span class="progress"></span>
</div>