Kuinka luoda animoitu kirjoitusteho

Jan 29, 2026
Miten tehdään

Käytettäessä hyvin, CSS-animaatio voi lisätä kiinnostusta ja persoonallisuutta sivustoosi. Tässä artikkelissa kävelemme miten luodaan animoitu vaikutus, joka tekee typografiastasi vähitellen, ikään kuin kirjoitettaisiin kirjoituskoneelle. Näet esimerkin animaatiosta toiminnassa paikan päällä Krypton , Cryptocurrency Trading Bot. Vaikutus on vaikuttava ja se on helppo toteuttaa myös.

Muita helppoja tavoin luoda ihmisarvoinen web-suunnittelu, kokeile erinomaista Verkkosivuston rakentaja työkalu tai yläosa sivujen ylläpito Palvelu. Tai lue on selvittää, miten tämä animaatio saavuttaa omalla sivustollasi.

  • Tutustu CSS-animaation uusi raja

01. Asiakirjan aloittaminen

Ensimmäinen vaihe on aloittaa verkkosivun rakenne. Tämä koostuu HTML-säiliöstä, joka on vastuussa pään ja rungon osat. Kun pääosan päävastuu on ladata ulkoiset CSS, runko-osa tallentaa vaiheessa 2 luodun HTML-sisällön. 

 & lt;! Tophype HTML & GT;
& lt; html & gt;
& lt; pää & gt;
& lt; otsikko & gt; kirjoitusteho & lt; / otsikko & gt;
& lt; Link Rel = "Stylesheet" tyyppi = "Text / CSS" Href = "Styles.css" / & gt;
& lt; / head & gt;
& lt; body & gt;
*** Vaihe 2 Tässä
& lt; / body & gt;
& lt; / html & gt;

02. HTML-sisältö

HTML-pitoisuus koostuu säiliöstä, joka käyttää "kirjoittamista" luokkaa. CSS käyttää tätä käyttämään kirjoitustehokkuutta mihin tahansa lapselliseen elementteihin. Lapsipitoisuus elementti on valmistettu H1-tunnisteesta, mutta voit käyttää toista elementtiä, kuten "P", jotta voidaan luoda elementti kappaleeksi. 

 & lt; div luokka = "kirjoittaminen" & gt;
  & lt; h1 & gt; Laita otsikko tähän ... & lt; / h1 & gt;
& lt; / div & gt;

03. CSS: n aloittaminen

Luo tiedosto nimeltä "Styles.css". CSS: n ensimmäinen vaihe määrittää asiakirjan ja kehon säiliöt koko selainikkunan kattamiseksi ilman näkyvää raja-aluetta. Mustan sivun tausta- ja valkoiset tekstin värit asetetaan myös tässä vaiheessa. Sivun sisältöelementit perivät tämän vaiheen värit, kun niiden oletusväri. 

 ​​Body, HTML {
  Näyttö: Block;
  Leveys: 100%;
  Korkeus: 100%;
  Tausta: # 000;
  Väri: #FFF;
  Pehmuste: 0;
  Marginaali: 0;
}

04. Kirjoita lapsia

Kaikki kirjoitusastian lapset asetetaan näyttämään yhden rivin yli ilman tekstin käärintä. Tärkeintä on, että näillä lapsielementeillä on "kirjoittaminen" animaatio. Tämä animaatio on asetettu pelaamaan viisi sekuntia 50 kehyksen tilannekunnan avulla - mahdollistaa porrastetun kirjoitustehon. 

 ​​.Typing & gt; * {
  ylivuoto piilotettu;
  Valkoinen tila: Nowrap;
  Animaatio: Typinganim 5S Vaiheet (50);
}

05. Kasvojen silmät

Vaikutus liittyy myös animoituun kasvoihin, jotka näyttävät kuvata kirjoitetun tekstin. Tämä vaihe luo tämän kasvojen silmät CSS: n virtuaalisena "elementtinä jälkeen valitsin. Silmät sijoitetaan suhteessa vanhempaan tekstiin, ja sen sisältö asettaa kaksi pistettä tekstimerkkinä. 

 ​​.Typing & gt; *::jälkeen{
  sisältö: ". .";
  Näyttö: Block;
  Asema: Absoluuttinen;
  Top: 1em;
  Vasen :.35EM;
}

06. Kasvata suu

Kuten silmien kanssa, kasvot suuhun tehdään CSS-virtuaalisesta elementistä - tällä kertaa käyttämällä ennen valitsin. Suusi on sijoitettu suhteessa vanhemman tekstielementtiin sekä raja-säteellä näkyvän pyöristetyn muodon.

The TypingSpeak animaatiota sovelletaan; Se kestää 0,5 sekuntia kahdella animaation kahdella kehyksillä. Kun animaatio toistuu viisi kertaa, kokonaisanimaatioaika on 2,5 sekuntia. 

 ​​.Typing & gt; *::ennen{
  sisältö: "";
  Asema: Absoluuttinen;
  Näyttö: Block;
  Top: 2.1EM;
  Vasen :.25EM;
  Leveys: 1EM;
  Korkeus: .1em;
  Border-RADIUS: 100%;
  Tausta: #FFF;
  Animaatio: Typingspeak .5s vaiheet (2);
  Animaatio-iterointi-luku: 5;
}

07. Animaation määritelmät

Tämä vaihe määrittää animaatiot, joita viitataan edellisissä vaiheissa luotujen elementtien avulla. The Typinganim Tykistysteholle käytetty animaatio muuttaa elementinsä ilman leveyttä täysleveyteen. The TypingSpeak Kasvon suuhun käytetty animaatio muuttaa elementinsä litteästä avoimemmaksi. 

 ​​@keyfropes Typinganim {
  {Leveys: 0}
  {leveys: 100%}
}
@keyframes typingspeak {
  0% {leveys: 1em; Korkeus: .1em}
  100% {leveys: 1em; Korkeus: .5EM; }
}
***

Sain Design-tiedostoja tallentaaksesi?Päivitä sinun pilvivarasto Joten se on tehtävä.

Tämä artikkeli julkaistiin alun perin Bange 275 Creative Web Design Magazine Web Designer. Osta numero 275 täällä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

  • Luo slick UI-animaatioita
  • CSS: n näytön ominaisuus
  • Luo animoitu höyryn tekstivaikutus

Miten tehdään - Suosituimmat artikkelit

Työkuvan naamio taikuutta Houdini

Miten tehdään Jan 29, 2026

Jos olet kiinnostunut oppimaan enemmän Houdini, varmista, että osallistut New York (24-25 huhtikuu). Konferenssissa voit C..

Kuinka luoda super-realistinen fantasian olento

Miten tehdään Jan 29, 2026

Maalaus fantasian olento voi olla hauskaa. Mielestäni pyritään löytämään aiheen, joka antaa sinulle enemmän vapautta tutk..

Miten valita Photoshopin Lasso-työkaluja

Miten tehdään Jan 29, 2026

Valinnat ovat yksi tärkeimmistä tehtävistä, joita opit hallitsemaan Photoshop CC . Hyvä valinta antaa realismin kuvan, puhumattakaan puhtautta. Mutta niin paljon valikoima..

Kaikki mitä sinun tarvitsee tietää uudesta solmu.js 8

Miten tehdään Jan 29, 2026

Node.jsin viimeisin suuri vapautuminen julkaisee monia merkittäviä parannuksia JavaScript-yhteisöön, mukaan lukien päivitett..

Kuinka aloittaa Sass

Miten tehdään Jan 29, 2026

Sass On tehokas työkalu, joka tuo monia ominaisuuksia muista ohjelmointikieleistä CSS: ään - kuten toiminnot, muu..

Branding Plos Share Miten ne naulaa Brand Voice

Miten tehdään Jan 29, 2026

Kun olet keskittynyt asioiden suunnitteluun, se voi olla helppo unohtaa, kuinka tärkeä hyvä copywriting voi olla valmiiksi tuo..

Kuinka maalata maagisia hehkuja

Miten tehdään Jan 29, 2026

Tässä opetusohjelmassa näytän sinulle, kuinka maalata mystisiä runoja, jotka näyttävät hehkuvan. My Formula maalaamalla h..

5 tapaa hallita kassavirtausta tehokkaasti

Miten tehdään Jan 29, 2026

Cashflowin hallinta on avain freelance-menestykseen, ja on olemassa joitakin kovia ja nopeita sääntöjä varmistaaksesi, että ..

Luokat