taper sur l'écran

1,189 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 February 2024

Animation de bouton au survol

20 June 2024

Carte de chaussures

11 May 2024

Carte de survol Ethereum

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