escribiendo en la pantalla

1,191 byby.createsite

Abrir en el editor Publica tu código

Recomendado

28 August 2024

Efecto de desplazamiento al navegar por las imágenes

30 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

26 August 2025

Plantilla HTML para sitio web de películas

HTML

CSS

* {
 margin: 0;
 padding: 0;
}
body {
 font-family: monospace;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 100vw;
 height: 100vh;
 background-color: black;
 color: #00ff00;
 overflow: hidden;
}
/*usando white-space e overflow para não pular a linha */
.typing {
 position: relative;
 white-space: nowrap;
 overflow: hidden;
 border-right: 4px solid #00ff00; 
 font-size: 1.5em;
 display: block;
 margin-bottom: 0.5em;
}
/* after para simular a digitação */
.typing::after {
 content: '';
 position: absolute;
 right: 0;
 width: 4px; 
 height: 1.2em;
 background: #00ff00;
 animation: blink 0.75s step-end infinite;
}
/* animacao simples blink para piscar */
@keyframes blink {
 50% { opacity: 0; }
}
/* cada linha possui sua animação e usando steps para ir passo a passo */
#line1 { 
 animation: typing1 3s steps(22, end) forwards;
}
/* linha 2 com delay de 8s */
#line2 { 
 opacity:0;
 animation: typing2 3s steps(13, end) forwards 8s;
}
/* linha 3 com delay de 16s e todas linhas sincronizadas */
#line3 {
 opacity:0;
 animation: typing3 3s steps(11, end) forwards 16s; 
}
/*animacoes para chegar até a width que está sincronizada com o texto e escondendo o icone de digitar */
@keyframes typing1 {
 0% { width: 0; }
 99%{clip-path:none;}
 100% { width: 24ch; clip-path: inset(0 8px 0 0); }
}
@keyframes typing2 {
 0% { width: 0; opacity:1;}
 99%{clip-path:none;}
 100% { width: 14ch; opacity:1;clip-path: inset(0 9px 0 0); } 
}
@keyframes typing3 {
 0% { width: 0; opacity:1;}
 99%{clip-path:none;}
 100% { width: 14ch; opacity:1; clip-path: inset(0 10px 0 0);}
}