Hogyan lehet létrehozni egy animált gépelési hatást

Sep 11, 2025

kézikönyv

Ha jól használják, CSS animáció hozzáadhat kamat és személyiség a webhelyére. Ebben a cikkben sétálunk, hogyan lehet létrehozni egy olyan animációs hatást, amely fokozatosan megjelenik a tipográfia, mintha egy írógépen szerepelne. Láthatjuk egy példát az animációra a helyszínen Crypton , egy kriptocurrencia kereskedési bot. A hatás lenyűgöző, és könnyű megvalósítani is.

A tisztességes webdesign létrehozásának más egyszerű módjaira próbálkozzon ki weboldal építője eszköz, vagy felső web hosting szolgáltatás. Vagy olvassa el, hogy megtudja, hogyan érheti el ezt az animációt a saját webhelyén.

Fedezze fel a CSS animáció új határát

01. Dokumentumindítás

Az első lépés a weboldal szerkezetének kezdeményezése. Ez a fej- és testrészek tárolásáért felelős HTML-tartályból áll. Míg a fejrész fő felelőssége a külső CSS betöltése, a testrész a 2. lépésben létrehozott HTML-tartalmat tárolja.

 & lt;! Html & gt doctype;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; gépelési hatás & lt; / cím & gt;
& link rel = "stylesheet" type = "szöveg / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; test & gt;
*** 2. lépés
& lt; / test & gt;
& lt; / html & gt;

02. HTML tartalom

A HTML-tartalom olyan tartályból áll, amely a "gépelés" osztályt használja. Ezt a CSS használhatja, hogy a gépelési hatást bármely gyermekelemre alkalmazza. A gyermek tartalma eleme H1-címkéből készül, de más elemet is használhat, mint például a "P" az elem létrehozásához.

 & lt; div osztály = "gépelés" & gt;
  & lt; h1 & gt; tegye itt címét ... & lt; / h1 & gt;
& lt; / div & gt;

03. CSS-kezdeményezés

Hozzon létre egy "styles.css" nevű fájlt. A CSS első lépése meghatározza a dokumentum és a testtartályokat, hogy fedezze a teljes böngészőablakot látható határvonal nélkül. Ebben a lépésben a fekete oldal háttér és fehér szöveges színei alapértelmezett színek is be vannak állítva. Az oldalon található tartalmi elemek az ebben a lépésben beállított színt örökölnek alapértelmezett színként.

 test, html {
  Kijelző: blokk;
  Szélesség: 100%;
  Magasság: 100%;
  Háttér: # 000;
  Szín: #FFF;
  Padding: 0;
  Margó: 0;
}

04. Gyermekek gépelése

A gépelési konténeren belüli gyermekek egy sorban jelennek meg, anélkül, hogy szöveges csomagolás használata lenne. A legfontosabb, hogy ezek a gyermekelemek a "gépelés" animációt alkalmazzák. Ez az animáció öt másodperc alatt lejátszásra kerül, 50 keretes pillanatfelvételekkel - lehetővé teszi a lépcsőzetes gépelési hatás.

 .tiping & gt; * {
  túlcsordulás: rejtett;
  Fehér tér: mostrap;
  Animáció: Typinganim 5s lépések (50);
}

05. arcszemek

A hatást egy animált arc is kíséri, amely megmutatja a gépelt szöveget. Ez a lépés az arc szemét hozza létre, mint a CSS virtuális elemét után választó. A szemeket a szülő szövegéhez viszonyítva helyezzük el, a tartalomtartalom két pontos szöveges karakterként.

 .tiping & gt; *::után{
  tartalom: ". .";
  Kijelző: blokk;
  Pozíció: abszolút;
  Top: 1em;
  Bal: .35em;
}

06. arc száj

Mint a szemekkel, az arc szája CSS virtuális elemből készült - ezúttal a előtt választó. A száj a szülői szövegelemhez viszonyítva van elhelyezve, valamint a határ sugara kialakulása, hogy lekerekített formában jelenjen meg.

A Typingspeak az animációt alkalmazzák; Ez 0,5 másodpercig tart, két animációval. Az animáció ötször megismétlődik, a teljes animációs idő 2,5 másodperc lesz.

 .tiping & gt; *::előtt{
  tartalom: "";
  Pozíció: abszolút;
  Kijelző: blokk;
  Top: 2.1em;
  Bal: .25em;
  Szélesség: 1em;
  Magasság: .1em;
  Border-sugara: 100%;
  Háttér: #FFF;
  Animáció: Typingspeak .5s lépések (2);
  Animáció-iteration-count: 5;
}

07. Animációs definíciók

Ez a lépés meghatározza az előző lépésekben létrehozott elemek által hivatkozott animációkat. A typinganim A gépelési hatáshoz használt animáció megváltoztatja az elemét szélességtől a teljes szélességig. A Typingspeak Az arc szájához használt animáció megváltoztatja az elemét, hogy megjelenjen a lapos nyitva.

 @keyframes typinganim {
  {szélesség: 0}
  {szélesség: 100%}
}
@keyframes typingspeak {
  0% {szélesség: 1em; Magasság: .1em}
  100% {szélesség: 1em; Magasság: .5em; }
}
***

Megtakarították a tervezési fájlokat?Frissítse felhő tároló Tehát a munkához tartozik.

Ez a cikkeredetileg megjelenta szóban forgó275kreatívwebdesign magazinWeb Designer. Itt vásároljon 275 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

Slick UI animációk létrehozása
A CSS kijelző tulajdonságának megértése
Hozzon létre egy animált Steam szöveghatást

Hogyan lehet létrehozni egy animált gépelési hatást

01. Dokumentumindítás

02. HTML tartalom

03. CSS-kezdeményezés

04. Gyermekek gépelése

05. arcszemek

06. arc száj

07. Animációs definíciók

kézikönyv - Most Popular Articles

Cinema 4d oktatóanyagok: 13 a legjobb

Portréfotózás: Hogyan készítsünk tökéletes portrékat

10 módja a 3D-anatómia javítására

Hogyan kell felhívni egy személyt

Az Affinity Designer eszközökkel kezdődik

Hozzon létre egy üdvözlő belsejét Line Art segítségével

A hibás kompozíció javítása

Hozzon létre egy élethű digitális embert

Kategóriák