enter image description here

Within five seconds, it should be so filled, I can not figure out how to do it

1 answer 1

You can use the arrow as a text character and duplicate it with a pseudo-element with a different color.

.arrow{ display:inline-block; position:relative; font-size:50px; } .arrow:before{ content:'↓'; position:absolute; top:0; left:0; width:100%; height:0; overflow:hidden; color:red; animation:arrow 5s linear infinite; } @keyframes arrow{ to{ height:100%; } } 
 <span class="arrow">↓</span>