創建了一個不確定的進度條。我添加了填充，但這似乎不適用于右側。
.progress-bar {
height: 5px;
background-color: red;
width: 10rem;
overflow: hidden;
padding: 1rem;
}
.progress-bar-value {
width: 100%;
height: 100%;
background-color: pink;
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 100%;
}
@keyframes indeterminateAnimation {
0% { transform: translateX(0) scaleX(0); }
40% { transform: translateX(0) scaleX(0.4); }
100% { transform: translateX(100%) scaleX(0.5); }
}<div class="progress-bar">
<div class="progress-bar-value"></div>
</div>uj5u.com熱心網友回復：
不，padding-right 在這里不起作用 - 因為您正在翻譯內部元素的位置。
但是您可以將 padding-right 替換為 border-right 。
.progress-bar {
height: 5px;
background-color: red;
width: 10rem;
overflow: hidden;
padding: 1rem 0 1rem 1rem;
border-right: 1rem solid red;
}
.progress-bar-value {
width: 100%;
height: 100%;
background-color: pink;
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 100%;
}
@keyframes indeterminateAnimation {
0% { transform: translateX(0) scaleX(0); }
40% { transform: translateX(0) scaleX(0.4); }
100% { transform: translateX(100%) scaleX(0.5); }
}<div class="progress-bar">
<div class="progress-bar-value"></div>
</div>uj5u.com熱心網友回復：
您可以簡單地更改 treanslate x 值：
@keyframes indeterminateAnimation {
0% { transform: translateX(0) scaleX(0); }
40% { transform: translateX(0) scaleX(0.4); }
100% { transform: translateX(45%) scaleX(0.5); }
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527388.html
標籤：htmlcss
上一篇：多個div中的多個字體
下一篇：將div高度調整為最大n個子項