How to make TypeWritter in Html and CSS only on December 18, 2021 Get link Facebook X Pinterest Email Other Apps How to make TypeWritter in Html and CSS only Html part Typewriter using css only Welcome to my youtube channel 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