大家好,我想製作一個黃色的條跑到一半之後,綠色的條才出現(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,但這樣做之後綠色的條整條都不見了,想請問應該要怎麼做呢?非常謝謝大家!
想請問如何做到黃色條跑到一半後綠色條才出現(xiàn)的效果?
梵蒂岡之花
2019-05-11 09:27:48