Hvordan lage en animert skrivemåte

Feb 12, 2026
hvordan

Når det brukes bra, CSS animasjon kan legge til interesse og personlighet på nettstedet ditt. I denne artikkelen går vi gjennom hvordan man lager en animert effekt som vil gjøre typografien din gradvis, som om den ble skrevet på en skrivemaskin. Du kan se et eksempel på animasjonen i aksjon på nettstedet for Crypton. , en kryptocurrency trading bot. Effekten er imponerende, og det er lett å implementere også. [1. 3]

For andre enkle måter å skape anstendig webdesign, prøv en utmerket Nettstedbygger verktøy, eller en topp Web Hosting. service. Eller les videre for å finne ut hvordan du oppnår denne animasjonen på ditt eget nettsted. [1. 3]

  • Utforsk den nye grensen av CSS animasjon

01. Dokumentinitiasjon

Det første trinnet er å starte strukturen på nettsiden. Dette består av HTML-beholderen som er ansvarlig for å lagre hodet og kroppsdelene. Mens hodeseksjonens hovedansvar er å laste de eksterne CSS, vil kroppsdelen lagre HTML-innholdet som er opprettet i trinn 2. [1. 3] 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; Typing effekt & lt; / title & gt;
& lt; link rel = "Stylesheet" type = "tekst / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; body & gt;
*** Trinn 2 her
& lt; / body & gt;
& lt; / html & gt;

02. HTML-innhold

HTML-innholdet består av en beholder som bruker "Typing" -klassen. Dette vil bli brukt av CSS for å anvende skriveffekten til alle barnelementer. Barnetinnholdselementet er laget av en H1-tag, men du kan bruke et annet element som "P" for å lage elementet som et avsnitt. [1. 3] 

 & lt; div class = "Typing" & gt;
  & lt; h1 & gt; Sett tittelen din her ... & lt; / h1 & gt;
& lt; / div & gt;

03. CSS-initiering

Opprett en fil som heter 'Styles.css'. Det første trinnet i CSS definerer dokument- og kroppsbeholderne for å dekke hele nettleservinduet uten synlig grenseavstand. Standardfargene for den svarte sidens bakgrunn og hvite tekstfarger er også angitt i dette trinnet. Innholdselementer på siden vil arve fargene i dette trinnet som standardfarge. [1. 3] 

 ​​Kropp, HTML {
  Skjerm: blokk;
  Bredde: 100%;
  Høyde: 100%;
  Bakgrunn: # 000;
  farge: #fff;
  polstring: 0;
  margin: 0;
}

04. Typing barn

Alle barn i skrivebeholderen er satt til å vise over en linje uten bruk av tekstinnpakning. Viktigst av alt, disse barnelementene har "typing" animasjonen som brukes til dem. Denne animasjonen er satt til å spille over fem sekunder med 50 ramme øyeblikksbilder - slik at den forskjøvede typing effekten. [1. 3] 

 ​​.typing & gt; * {
  Overflow: Skjult;
  Hvitplass: Nowrap;
  Animasjon: Typinganim 5S trinn (50);
}

05. Ansikts øyne

Effekten er også ledsaget av et animert ansikt som ser ut til å fortelle den typede teksten. Dette trinnet skaper øynene til dette ansiktet som et CSS-virtuelt element som bruker etter velger. Øynene er plassert i forhold til foreldre-teksten, med innholdet som to dot-teksttegn. [1. 3] 

 ​​.typing & gt; *::etter{
  innhold: ". .";
  Skjerm: blokk;
  posisjon: absolutt;
  Topp: 1em;
  Venstre: .35EM;
}

06. Face Mouth.

Som med øynene, er ansiktets munn laget av et CSS-virtuelt element - denne gangen med før velger. Munnen er plassert i forhold til det overordnede tekstelementet, samt å ha en grenseadius som skal vises med en avrundet form. [1. 3]

De TypingsPeak. animasjon er brukt; Det vil vare i 0,5 sekunder ved hjelp av to animasjonsrammer. Med animasjonen som gjentas fem ganger, vil den totale animasjonstiden være 2,5 sekunder. [1. 3] 

 ​​.typing & gt; *::før{
  innhold: "";
  posisjon: absolutt;
  Skjerm: blokk;
  Topp: 2.1 EM;
  Venstre: .25em;
  Bredde: 1EM;
  Høyde: .1EM;
  Border-Radius: 100%;
  Bakgrunn: #fff;
  Animasjon: TypingsPeak .5s trinn (2);
  Animasjon-iterasjon-teller: 5;
}

07. Animasjonsdefinisjoner

Dette trinnet definerer animasjonene som er referert til av elementer som er opprettet i tidligere trinn. De Typinganim. Animasjon som har blitt brukt til å skriveeffekten, endrer elementet fra ingen bredde til full bredde. De TypingsPeak. Animasjon som brukes til ansiktets munn endrer elementet sitt fra å vises flatt til mer åpen. [1. 3] 

 ​​@keyframes typinganim {
  fra {bredde: 0}
  til {bredde: 100%}
}
@keyframes typingspeak {
  0% {bredde: 1em; Høyde: .1EM}
  100% {bredde: 1em; Høyde: .5EM; }
}
***

[1. 3]

Har du designfiler for å lagre?Oppgrader din skylagring Så det er opp til jobben. [1. 3]

Denne artikkelen ble opprinnelig publisert i utgave 275 av Creative Web Design Magazine webdesigner. Kjøp problem 275 her eller Abonner på webdesigner her . [1. 3]

Relaterte artikler: [1. 3]

  • Lag slick ui animasjoner
  • Forstå CSS-displayegenskapen
  • Opprett en animert damptekst effekt

hvordan - Mest populære artikler

Hvordan tegne et hode: En komplett guide

hvordan Feb 12, 2026

[1. 3] (Bilde Kreditt: Oliver Sin) Side 1 av 2: Hvordan tegne et hode fra forskjellige vinkl..

Hvordan lage glitrende øyne i oljemaling

hvordan Feb 12, 2026

[1. 3] Øynene er det viktigste elementet i et vellykket portrett, men mange mennesker sliter med å tegne dem riktig. I denne art..

Slik bruker du Adobe Capture CC

hvordan Feb 12, 2026

Adobe Capture CC er en fantastisk app som gjør at du kan finne fonter og farger bare ved å ta et bilde. Du lurer kanskje på hva skrifter har blitt brukt i ditt favorittmagasin, for eksempe..

Legg til en glitcheffekt på nettstedet ditt

hvordan Feb 12, 2026

En fin måte å ta oppmerksom på - og holde tak i det - er å skape en Nettstedslayout [1. 3] som viser dine talenter fra offen. Ukra..

Lag dynamisk bevegelse i en sammensetning

hvordan Feb 12, 2026

[1. 3] Før du starter tegningen, er det viktig å bestemme hvilken type bevegelse du vil fange. Prøv å holde det enkelt og dyna..

Hvordan digitalt skulptur i Zbrushcore

hvordan Feb 12, 2026

[1. 3] ZbrushCore ($ 149.95 for en enkeltbrukerlisens) er en forenklet versjon av Zbrush. som fungerer ..

Lag en hest vanneffekt i RealFlow

hvordan Feb 12, 2026

[1. 3] Denne opplæringen viser deg hvordan du simulerer en væskehøydeffekt. Det finnes ulike programvare og plugins du kan bruk..

Hvordan tegne Harley Quinn

hvordan Feb 12, 2026

[1. 3] For meg, appell av digital Maleri teknikker er enkle. I motsetning til tradisjonelle medier kan jeg lage et ..

Kategorier