Come creare un effetto di battitura animato

Sep 12, 2025

Come si fa

Se usato bene, Animazione CSS. può aggiungere interessi e personalità al tuo sito. In questo articolo, attraverseremo come creare un effetto animato che farà apparire la tua tipografia gradualmente, come se fosse digitato su una macchina da scrivere. Puoi vedere un esempio dell'animazione in azione sul sito per Crypton. , un bot di trading di criptoCurrency. L'effetto è impressionante ed è facile da implementare.

Per altri semplici modi per creare un web design decente, provare un eccellente Builder del sito web strumento o una cima web hosting servizio. Oppure, continua a leggere per scoprire come raggiungere questa animazione sul tuo sito.

Esplora la nuova frontiera dell'animazione CSS

01. Inizio del documento

Il primo passo è iniziare la struttura della pagina web. Questo è costituito dal contenitore HTML responsabile della memorizzazione delle sezioni della testa e del corpo. Mentre la principale responsabilità della sezione della testa è quella di caricare il CSS esterno, la sezione del corpo memorizzerà il contenuto HTML creato nel passaggio 2.

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; Titolo & GT; Effetto digitante & lt; / Titolo & GT;
& lt; lt; link rel = "stilsheet" type = "testo / css" href = "stili.css" / & gt;
& lt; / head & gt;
& lt; corpo e GT;
*** Step 2 qui
& lt; / corpo e GT;
& lt; / html & gt;

02. Contenuto HTML.

Il contenuto HTML è costituito da un contenitore che utilizza la classe 'digitando'. Questo sarà utilizzato dal CSS per applicare l'effetto di battitura a qualsiasi elemento figlio. L'elemento del contenuto figlio è realizzato da un tag H1, ma è possibile utilizzare un altro elemento come "P" per creare l'elemento come paragrafo.

 & lt; div class = "digitando" e gt;
  & lt; h1 & gt; metti il tuo titolo qui ... & lt; / h1 & gt;
& lt; / div & gt;

03. Iniziazione CSS.

Creare un file chiamato 'stili.css'. Il primo passo del CSS definisce il documento e i contenitori del corpo per coprire la finestra del browser completa senza alcuna spaziatura del bordo visibile. I colori predefiniti per lo sfondo della pagina nera e i colori del testo bianco sono impostati in questo passaggio. Gli elementi di contenuto all'interno della pagina erediteranno il colore impostato in questo passaggio come il loro colore predefinito.

 Body, HTML {
  blocco di visualizzazione;
  Larghezza: 100%;
  Altezza: 100%;
  Sfondo: # 000;
  Colore: #FFFF;
  Imbottitura: 0;
  Margine: 0;
}

04. Digitando i bambini

Tutti i bambini all'interno del contenitore di battitura sono impostati per visualizzare su una linea senza l'uso del wrapping del testo. Soprattutto, questi elementi figlio hanno l'animazione "digitando" applicata a loro. Questa animazione è impostata per riprodurre oltre cinque secondi con 50 snapshot del telaio - consentendo l'effetto di battitura sfalsato.

 .Typing & GT; * {
  Overflow: nascosto;
  Spazio bianco: NowRap;
  Animazione: Typinganim 5S Passaggi (50);
}

05. Face Eyes.

L'effetto è anche accompagnato da una faccia animata che sembra narrare il testo digitato. Questo passaggio crea gli occhi di questa faccia come elemento 'virtuale' CSS usando il dopo selettore. Gli occhi sono posizionati rispetto al testo genitore, con il suo contenuto impostato come due caratteri di testo DOT.

 .Typing & GT; *::dopo{
  Contenuto: "..";
  blocco di visualizzazione;
  Posizione: assoluto;
  Top: 1em;
  a sinistra: .35em;
}

06. Faccia bocca

Come con gli occhi, la bocca del viso è fatta da un elemento virtuale CSS - questa volta usando il prima selettore. La bocca è posizionata in relazione all'elemento del testo genitore, oltre ad avere un raggio di frontiera da apparire con una forma arrotondata.

Il digitaspeak. l'animazione è applicata; Durerà per 0,5 secondi utilizzando due fotogrammi di animazione. Con l'animazione viene ripetuta cinque volte, il tempo di animazione totale sarà di 2,5 secondi.

 .Typing & GT; *::prima{
  Contenuto: "";
  Posizione: assoluto;
  blocco di visualizzazione;
  TOP: 2.1EM;
  a sinistra: .25Em;
  Larghezza: 1Em;
  Altezza: .1em;
  Border-Radius: 100%;
  Sfondo: #fff;
  Animazione: DigitaturaSpeak .5s Passi (2);
  Animazione-iterazione-conteggio: 5;
}

07. Definizioni di animazione.

Questo passaggio definisce le animazioni referenziate da elementi creati nei passaggi precedenti. Il Typinganim. L'animazione che è stata utilizzata per l'effetto di battitura cambia il suo elemento da nessuna larghezza a larghezza completa. Il digitaspeak. L'animazione utilizzata per la bocca del viso cambia il suo elemento dall'apparire piatto a più aperto.

 @ @key fotogrammi typinganim {
  da {larghezza: 0}
  a {larghezza: 100%}
}
@key fotogrammi digitaspeak {
  0% {larghezza: 1em; Altezza: .1em}
  100% {larghezza: 1em; Altezza: .5em; }
}
***

Hai dei file di progettazione per salvare?Aggiorna il tuo. deposito cloud. Quindi tocca al lavoro.

Questo articolo è stato originariamente pubblicato in emissione 275 di Web Designer di Web Design Web Design. Comprare il problema 275 qui o Iscriviti al web designer qui .

Articoli Correlati:

Crea animazioni Slick UI
Capire la proprietà del display CSS
Creare un effetto testo animato a vapore

Come creare un effetto di battitura animato

01. Inizio del documento

02. Contenuto HTML.

03. Iniziazione CSS.

04. Digitando i bambini

05. Face Eyes.

06. Faccia bocca

07. Definizioni di animazione.

Come si fa - Articoli più popolari

Inizia con Artrage

Come disegnare un personaggio in penna e inchiostro

Animazione svg con javascript

Come progettare figure grafiche

Procreare Tutorial: nuovi strumenti esplorati

Anatomy MasterClass: perfette le tue figure

Genera tavolozze di colori senza fine con Khroma

Sviluppa le tue abilità di caricatura

Categorie