我有这个 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>
最佳答案
设置:
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>
关于html - CSS动画进度条从下往上运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48887647/