第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

想請問如何做到黃色條跑到一半後綠色條才出現(xiàn)的效果?

想請問如何做到黃色條跑到一半後綠色條才出現(xiàn)的效果?

梵蒂岡之花 2019-05-11 09:27:48
大家好,我想製作一個黃色的條跑到一半之後,綠色的條才出現(xiàn)並把條跑完,但現(xiàn)在的情況是在黃色的條跑到一半之前綠色的條就已經(jīng)出現(xiàn)了,想請問我應該如何更改我的代碼達到黃色條跑完之後,綠色條才出現(xiàn)並從中間跑到最後?這是codepen的demo:https://codepen.io/lovelearni...我想讓綠色條(progress2)在第2秒才開始出現(xiàn),而不是最一開始就出現(xiàn)---css---.container1{position:relative;width:100%;margin-top:10px;}.progress1{height:10px;width:50%;background-color:yellow;border-radius:2px;animation:becomeyellow2slinear;display:flex;float:left;}.progress2{height:10px;width:50%;position:absolute;left:50%;/*display:flex;float:right;*/background-color:green;border-radius:2px;animation:becomegreen2s2slinear;}@keyframesbecomeyellow{0%{width:0%;background-color:red;}100%{width:50%;background-color:yellow;}}@keyframesbecomegreen{0%{width:0%;background-color:yellow;display:none;}100%{width:50%;background-color:green;}}---html---我試過直接在progress2直接加上display:none,但這樣做之後綠色的條整條都不見了,想請問應該要怎麼做呢?非常謝謝大家!
查看完整描述

2 回答

?
長風秋雁

TA貢獻1757條經(jīng)驗 獲得超7個贊

talkischeap,showyouthecode.
.container1{
position:relative;
width:100%;
margin-top:10px;
}
.progress1{
height:10px;
width:50%;
background-color:yellow;
border-radius:2px;
animation:becomeyellow2sforwards;
display:flex;
float:left;
}
.progress2{
height:10px;
width:50%;
position:absolute;
left:50%;
/*display:flex;
float:right;*/
background-color:green;
border-radius:2px;
animation:becomegreen4sforwards;
}
@keyframesbecomeyellow{
0%{
width:0%;
background-color:red;
}
100%{
width:50%;
background-color:yellow;
}
}
@keyframesbecomegreen{
0%{
width:0%;
}
50%{
width:0%;
background-color:yellow;
}
100%{
width:50%;
background-color:green;
}
}
吧progress2的延時去掉,改成4s,前50%寬度為0.
                            
查看完整回答
反對 回復 2019-05-11
?
茅侃侃

TA貢獻1842條經(jīng)驗 獲得超21個贊

我覺得如果只是想要達到進度條從紅到黃到綠的漸變,可以向下面這樣簡單實現(xiàn):
.container1{
margin-top:10px;
}
.progress{
height:10px;
width:0%;
border-radius:2px;
animation:gradient2slinearforwards;
}
@keyframesgradient{
0%{
background:red
}
50%{
background:yellow;
}
100%{
background:green;
width:100%;
}
}
                            
查看完整回答
反對 回復 2019-05-11
  • 2 回答
  • 0 關(guān)注
  • 419 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號