How to make TypeWritter in Html and CSS only on December 18, 2021 Get link Facebook Twitter Pinterest Email Other Apps How to make TypeWritter in Html and CSS only Html part <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typewriter using css only</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Welcome to my youtube channel </h1> </body> </html> CSS part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; background: #333; margin-top: 100px; margin-left: 150px; } h1{ font-size: 70px; color: red; font-family: sans-serif; width: max-content; position: relative; } h1::before, h1::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } h1::before{ background:#333; animation: typewriter 6s steps(24) 1s forwards; } h1::after{ width: 0.125em; background: #000; animation: typewriter 6s steps(24) 1s forwards, blink 750ms steps(24) infinite; } @keyframes typewriter{ to{ left: 100%; } } @keyframes blink{ to{ background: transparent; } } Comments
Comments
Post a Comment