Hur man skapar en animerad typseffekt

Sep 11, 2025

Hur

När den används bra, CSS-animering Kan lägga till intresse och personlighet till din webbplats. I den här artikeln går vi igenom hur du skapar en animerad effekt som gör att din typografi uppträder gradvis, som om den skrivits på en skrivmaskin. Du kan se ett exempel på animationen i aktion på platsen för Krypton , en kryptokurrency handelsbåt. Effekten är imponerande och det är lätt att implementera också.

För andra enkla sätt att skapa anständig webbdesign, prova en utmärkt Website Builder verktyg eller en topp webbhotell service. Eller läs vidare för att ta reda på hur du uppnår den här animationen på din egen webbplats.

Utforska den nya gränsen för CSS-animering

01. Dokumentinitiering

Det första steget är att initiera strukturen på webbsidan. Detta består av HTML-behållaren som är ansvarig för att lagra huvud- och kroppssektionerna. Medan huvudsektionens huvudansvar är att ladda den externa CSS, lagrar kroppsdelen HTML-halten som skapats i steg 2.

 & lt;! Doktype html & gt;
& lt; html & gt;
& lt; huvud & gt;
& lt; Titel & GT; Typing Effect & LT; / Titel & GT;
& lt; länk rel = "stylesheet" typ = "Text / css" href = "stilar.css" / & gt;
& LT; / Head & GT;
& lt; kropp & gt;
*** Steg 2 här
& LT; / Body & GT;
& lt; / html & gt;

02. HTML-innehåll

HTML-innehållet består av en behållare som använder klassen "Skrivning". Detta kommer att användas av CSS för att tillämpa typningseffekten till några barnelement. Barninnehållet är tillverkat av en H1-tagg, men du kan använda ett annat element som "P" för att skapa elementet som ett stycke.

 & lt; Div Class = "Typing" & GT;
  & lt; H1 & GT; Sätt din titel här ... & LT; / H1 & GT;
& lt; / div & gt;

03. CSS-initiering

Skapa en fil som heter 'Styles.css'. Det första steget i CSS definierar dokumentet och kroppsbehållarna för att täcka hela webbläsarfönstret utan något synligt gränsavstånd. Standardfärgen för den svarta sidan Bakgrund och vita textfärger är också inställda i detta steg. Innehållselement inom sidan kommer att erva färgen i det här steget som standardfärg.

 kropp, html {
  Visa: Block;
  Bredd: 100%;
  Höjd: 100%;
  Bakgrund: # 000;
  Färg: #fff;
  Padding: 0;
  Marginal: 0;
}

04. Skriva barn

Alla barn i skrivbehållaren är inställda på att visa över en rad utan användning av textförpackning. Viktigast, dessa barnelement har den "typiska" animationen som tillämpas på dem. Denna animering är inställd att spela över fem sekunder med 50 rams snapshots - vilket möjliggör den förskjutna typseffekten.

 .typing & gt; * {
  Överflöde: Dold;
  Vitrummet: Nowrap;
  Animering: Typinganim 5S steg (50);
}

05. Ansikte ögon

Effekten är också åtföljd av ett animerat ansikte som tycks berättas den typade texten. Detta steg skapar ögonen på detta ansikte som ett CSS: s virtuella element med hjälp av efter väljare. Ögonen är placerade i förhållande till modertexten, med innehållet som två dottextkaraktärer.

 .typing & gt; *::efter{
  innehåll: ". .";
  Visa: Block;
  position: absolut;
  Topp: 1em;
  Vänster: .35EM;
}

06. Ansiktsmunstycke

Liksom med ögonen är ansiktets mun gjord av ett CSS-virtuellt element - den här gången med hjälp av innan väljare. Munnen är placerad i förhållande till modertextelementet, såväl som att ha en gränsradie som ska visas med en rundad form.

De typ animering tillämpas; Det kommer att vara i 0,5 sekunder med två animationsramar. När animationen upprepas fem gånger kommer den totala animeringstiden att vara 2,5 sekunder.

 .typing & gt; *::innan{
  innehåll: "";
  position: absolut;
  Visa: Block;
  Topp: 2.1
  Vänster: .25EM;
  Bredd: 1EM;
  Höjd: .1em;
  Border-Radius: 100%;
  Bakgrund: #fff;
  Animering: TypingsPeak .5S steg (2);
  Animation-iteration-count: 5;
}

07. Animering Definitioner

Detta steg definierar de animeringar som refereras av element som skapats i tidigare steg. De typ Animering som har använts för att skriva effekten ändrar sitt element från ingen bredd till full bredd. De typ Animering som används för ansiktets mun ändrar sitt element från att visas platt till öppnare.

 @keyframes typinganim {
  Från {Bredd: 0}
  till {Bredd: 100%}
}
@keyframes typingsPeak {
  0% {Bredd: 1em; Höjd: .1em}
  100% {Bredd: 1EM; Höjd: .5EM; }
}
***

Fick designfiler för att spara?Uppgradera din molnlagring Så det är upp till jobbet.

Denna artikel publicerades ursprungligen i utgåva 275 av kreativ webbdesignmagasin webbdesigner. Köp utgåva 275 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

Skapa slick ui animationer
Förstå CSS-skärmens egendom
Skapa en animerad ångtexteffekt

Hur man skapar en animerad typseffekt

01. Dokumentinitiering

02. HTML-innehåll

03. CSS-initiering

04. Skriva barn

05. Ansikte ögon

06. Ansiktsmunstycke

07. Animering Definitioner

Hur - Mest populära artiklar

Hur man bygger en progressiv webbapp

Hur man blandar färgpennor

Ta tag i den våt-i-våta målningstekniken

Hur man använder blandningsformer för att animera tecken

Skapa en reagerande instrumentpanel med Figma

Upptäck undermålning och hur man utnyttjar det

Hur man skulpterar och utgör ett tecknadshuvud i Zbrush

Boost D3.js-diagram med SVG-gradienter

Kategorier