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

Feb 1, 2026
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

kézikönyv - Most Popular Articles

Hogyan kell megállítani az arcmaszk viselése során ködösöd

kézikönyv Feb 1, 2026

(Kép hitel: getty képek) Ha a szemüveged ködösül, amikor arcmaszkot visel, nem vagy egyedül. Ez a probléma so..

Javítani kell a Concept művészeti készségeit a Photoshopban

kézikönyv Feb 1, 2026

Ehhez a műhelyhez szeretnék megmutatni neked egy igazán szórakoztató módját, hogy vázolja a karaktereket a képzeletedbő..

végtelen színpalettákat generál Khroma-val

kézikönyv Feb 1, 2026

Kiváló felhasználás színelmélet A design az egyik olyan dolog, amely elválasztja a nagyokat az átlagtól. ..

Lenyűgöző tájak létrehozása Houdini

kézikönyv Feb 1, 2026

Segítségével egy csomópont-alapú, procedurális megközelítést, 3D szoftver Houdini ettől SideFX biztosítja a digitális..

Hogyan kell meggyőzni a meggyőző gondolatokat

kézikönyv Feb 1, 2026

A digitális festési technikák lehetővé teszik, hogy viszonylag egyszerűen ábrázolhassák a visszaverődéseket üvegben. ..

Rajzoljon egy kutya ceruza portréját

kézikönyv Feb 1, 2026

A PET portrék rajzolásakor nem csak tudnia kell Hogyan kell felhívni az állatokat : A feladat az adott állat ..

Visual Cues hozzáadása a webhelyére

kézikönyv Feb 1, 2026

Ez bosszantó a weboldal felhasználói számára, hogy csak egy linkre kattintsunk, hogy megtalálja, hogy a weboldal nem érdek..

Hozzon létre egy alacsony poli tapétát C4D-ben

kézikönyv Feb 1, 2026

Page 1 of 2: Hozzon létre egy alacsony poli tapétát a C4D-ben: 01-06 lépések ..

Kategóriák