1 回答

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超7個(gè)贊
您需要添加flex-shrink:0
以避免文本尖叫,因?yàn)槟谠O(shè)置width:100%
.table-bars .bar-box .text {
height: 100%;
margin: 0 30px 0 200px;
width: 200px;
text-align: right;
flex-shrink:0;
}
.bar-box {
margin-bottom: 20px;
}
.table-bars div .progress {
background-color: #0071b9;
border-radius: 20px;
border-right: 13px solid rgb(0, 173, 239);
animation: progressBar 2s ease-in-out;
animation-fill-mode: both;
height: 20px;
}
@keyframes progressBar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.bar-box {
display: flex;
}
<div class="table-bars">
<div class="bar-box">
<div class="text"><span>TEXT</span></div>
<div class="progress"></div>
</div>
<div class="bar-box">
<div class="text"><span>Another TEXT</span></div>
<div class="progress"></div>
</div>
</div>
或者用動(dòng)畫flex-grow
代替width
:
.table-bars .bar-box .text {
height: 100%;
margin: 0 30px 0 200px;
width: 200px;
text-align: right;
flex-shrink:0;
}
.bar-box {
margin-bottom: 20px;
}
.table-bars div .progress {
background-color: #0071b9;
border-radius: 20px;
border-right: 13px solid rgb(0, 173, 239);
animation: progressBar 2s ease-in-out;
animation-fill-mode: both;
height: 20px;
}
@keyframes progressBar {
0% {
flex-grow: 0;
}
100% {
flex-grow: 1;
}
}
.bar-box {
display: flex;
}
<div class="table-bars">
<div class="bar-box">
<div class="text"><span>TEXT</span></div>
<div class="progress"></div>
</div>
<div class="bar-box">
<div class="text"><span>Another TEXT</span></div>
<div class="progress"></div>
</div>
</div>
- 1 回答
- 0 關(guān)注
- 127 瀏覽
添加回答
舉報(bào)