स्क्रीन पर टाइप करना

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

19 October 2024

* {
 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);}
}

स्क्रीन पर टाइप करना

अनुशंसित

HTML डेवलपर पोर्टफोलियो V2

भविष्यवादी संपर्क पृष्ठ

होवर एनिमेटेड बटन पर

HTML

CSS

JS

अनुशंसित

HTML डेवलपर पोर्टफोलियो V2

भविष्यवादी संपर्क पृष्ठ

होवर एनिमेटेड बटन पर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS