Cum se creează un efect de tipărit animat

Sep 14, 2025

să

Când este folosit bine, CSS animație poate adăuga un interes și personalitate pe site-ul dvs. În acest articol, vom trece prin modul de a crea un efect animat care va face ca tipografia să pară treptat, ca și cum ar fi fost tipărită pe o mașină de scris. Puteți vedea un exemplu de animație în acțiune pe site pentru Crypton. , un bot de tranzacționare criptocurrency. Efectul este impresionant și este ușor de implementat.

Pentru alte modalități ușoare de a crea design decent web, încercați un excelent Builder de site-uri web instrument sau un vârf web hosting serviciu. Sau, citiți mai departe pentru a afla cum să realizați această animație pe propriul dvs. site.

Explorați noua frontieră a animației CSS

01. Inițierea documentelor

Primul pas este inițierea structurii paginii web. Aceasta constă în containerul HTML responsabil pentru depozitarea secțiunilor capului și a corpului. În timp ce responsabilitatea principală a secțiunii capului este de a încărca CSS-ul extern, secțiunea corpului va stoca conținutul HTML creat în pasul 2.

 și lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;

02. Conținutul HTML.

Conținutul HTML constă dintr-un container care utilizează clasa "Tastare". Aceasta va fi utilizată de CSS pentru a aplica efectul de introducere la orice element copil. Elementul de conținut al copilului este fabricat dintr-o etichetă H1, dar ați putea folosi un alt element, cum ar fi "P" pentru a crea elementul ca paragraf.

 & Lt; Div clasa = "tastând" & gt;
  & lt; h1 & gt; puneți titlul dvs. aici ... & lt; / h1 & gt;
& lt; / div & gt;

03. Inițierea CSS

Creați un fișier numit "Styles.Css". Prima etapă a CSS definește containerele documentului și ale corpului pentru a acoperi fereastra completă a browserului fără nici o dispărare de frontieră vizibilă. Culorile implicite pentru fundalul paginii negre și culorile textului alb sunt, de asemenea, setate în acest pas. Elementele de conținut din pagină vor moșteni culoarea setată în acest pas ca culoarea lor implicită.

 corp, html {
  Afișaj: bloc;
  Lățime: 100%;
  Înălțime: 100%;
  Context: # 000;
  Culoare: #ffff;
  Padding: 0;
  Marja: 0;
}

04. Tastarea copiilor

Toți copiii din containerul de tastare sunt setați să afișeze pe o singură linie fără utilizarea de ambalare a textului. Cel mai important, aceste elemente pentru copii au animația "tastarea" acestora. Această animație este setată să redea peste cinci secunde cu 50 de instantanee cadru - permițând efectul de tastare eșalonată.

 .Typing & gt; * {{
  Depășirea: ascunsă;
  spațiu alb: norap;
  Animație: Typinganim 5s Etape (50);
}

05. Ochii față

Efectul este, de asemenea, însoțit de o față animată care pare să povestească textul tipărit. Acest pas creează ochii acestei fețe ca un element "virtual" CSS folosind după selector. Ochii sunt plasați în raport cu textul părinte, cu conținutul său setat ca două caractere text punct.

 .Typing & gt; *::după{
  Conținut: ".";
  Afișaj: bloc;
  Poziție: absolută;
  TOP: 1EM;
  stânga: .35EM;
}

06. Face gura

Ca și cu ochii, gura feței este făcută dintr-un element virtual CSS - de data aceasta folosind inainte de selector. Gura este poziționată în raport cu elementul de text părinte, precum și cu o rază de frontieră să apară cu o formă rotunjită.

tipingspeak. animația este aplicată; Acesta va dura 0,5 secunde folosind două cadre de animație. Cu animația fiind repetată de cinci ori, timpul de animație total va fi de 2,5 secunde.

 .Typing & gt; *::inainte de{
  Conținut: "";
  Poziție: absolută;
  Afișaj: bloc;
  TOP: 2.1EM;
  stânga: .25EM;
  Lățime: 1EM;
  Înălțime: .1EM;
  Raza de frontieră: 100%;
  fundal: #fff;
  Animație: Tipărirea treptelor (2);
  Animație-iterație-număr: 5;
}

07. Definiții de animație

Acest pas definește animațiile menționate de elementele create în pașii anteriori. Typinganim. Animația care a fost utilizată pentru efectul de tastare își schimbă elementul fără lățime la lățime întreagă. tipingspeak. Animația utilizată pentru gura feței își schimbă elementul de a apărea la apariție la mai mult.

 @keyframes Typinganim {
  de la {lățime: 0}
  la {lățime: 100%}
}
@Kekyframes tipingspeak {
  0% {lățime: 1em; Înălțime: .1em}
  100% {lățime: 1em; Înălțime: .5EM; }
}
***

Aveți fișiere de design pentru a salva?Upgrade-te Stocare in cloud Deci depinde de slujbă.

Acest articol a fost inițial publicat în numărul 275 al revistei Creative Web Design Designer Web. Cumpărați problema 275 aici sau Aboneaza-te la designerul web aici .

Articole similare:

Creați animații Slick UI
Înțelegerea proprietății afișajului CSS
Creați un efect de text animat de text

Cum se creează un efect de tipărit animat

01. Inițierea documentelor

02. Conținutul HTML.

03. Inițierea CSS

04. Tastarea copiilor

05. Ochii față

06. Face gura

07. Definiții de animație

să - Cele mai populare articole

Cum se creează simulări de apă

Începeți cu Express.js

Cum să pictezi ca un maestru al secolului al XIX-lea

4 sfaturi pentru a îmbunătăți performanța paginii dvs.

Vopsea o viață expresivă în acrilici

Cum să sculptați digital în ZBRUSHCORE

Cum de a picta o scenă de pădure fantezie de vis

Puterea incredibilă a Flexbox

Categorii