CSS Animation Wie auf verlinkter webseite. CSS Lösung

Hallo Community ich habe diese Webseite gefunden... www.hinnendahl.com schaut euch da mal bitte die Cookie Anfrage an..- Diese Animation hätte ich gere für meinen gesamten text auf der webseite... Wie ist das Umzusetzen?

Der hier verwendete Code

<style> /* GLOBAL STYLES */ body { background: #333; padding-top: 5em; display: flex; justify-content: center; } /* DEMO-SPECIFIC STYLES */ .typewriter h1 { color: #fff; font-family: monospace; overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite; } /* The typing effect */ @keyframes typing { from { width: 0 } to { width: 100% } } /* The typewriter cursor effect */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange } } </style> <div class="typewriter"> <h1>The cat and the hat.</h1> </div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!