Grenze unten Animation

Question

Wie kann ich die unteren Grenze Animationen wie here machen? Im Hauptheader.

Answer 1

Zunächst einmal, das ist kein Grenz-Boden und es ist sicherlich nicht an den Haupt-Header überhaupt angeschlossen. Es ist ein Timer für das Verschieben des Karussells zum nächsten Bild.

Um diese Art von Animation zu erreichen, können Sie CSS3 verwenden.

HTML:

<div class="timer-wrapper"> 
    <div class="timer"></div> 
</div> 

CSS:

.timer-wrapper { 
    width: 100%; 
    height: 3px; 
} 

.timer { 
    width: 0px; 
    height: 2px; 
    background: blue; 
    animation: timerAnimation 5s ease; 
} 

@keyframes timerAnimation { 
    from { } 
    to { width: 100%; } 
} 

Demo