<style>
.typing-effect {
overflow: hidden; /* Hide the full text initially */
border-right: .15em solid orange; /* Blinking cursor effect */
white-space: nowrap; /* Prevent text from wrapping */
margin: 0 auto; /* Center the text */
letter-spacing: .15em; /* Spacing between characters */
width: 0; /* Start with a width of 0 */
animation:
typing 30.5s steps(150, end) forwards, /* Typing animation */
blink-caret 0.5s step-end infinite; /* Blinking cursor animation */
}
/* Keyframes for the typing animation */
@keyframes typing {
from { width: 50 }
to { width: 100% }
}
/* Keyframes for the blinking cursor */
@keyframes blink-caret {
from, to { border-color: transparent }
10% { border-color: orange; }
}
</style>
<html>
<p class="typing-effect">Hello, world! This is a CSS typing effect.</p>
</html>
Note: for demo you can check CSS framework https://picocss.com/
No comments:
Post a Comment