Typewriter Text - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typewriter Text</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #282c34; color: #61dafb; font-family: 'Courier New', Courier, monospace; font-size: 2em; } .typewriter-text { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 0.15em solid #61dafb; animation: typewriter 4s steps(40) 1s 1 normal both, blink 500ms steps(40) infinite; } @keyframes typewriter { from { width: 0; } to { width: 100%; } } @keyframes blink { from, to { border-color: transparent; } 50% { border-color: #61dafb; } } </style> </head> <body> <div class="typewriter-text">Typing Text Effect 🖋️</div> </body> </html>