Hoe een geanimeerd typ-effect te maken

Jan 30, 2026
Procedures

Wanneer goed gebruikt, CSS-animatie kan interesse en persoonlijkheid toevoegen aan uw site. In dit artikel lopen we door hoe we een geanimeerd effect creëren dat uw typografie geleidelijk zal maken, alsof het op een typemachine wordt getypt. U kunt een voorbeeld van de animatie in actie op de site bekijken Crypton , een Cryptocurrency Trading Bot. Het effect is indrukwekkend en het is ook gemakkelijk te implementeren.

Voor andere eenvoudige manieren om fatsoenlijk webontwerp te maken, probeer een uitstekend website bouwer gereedschap of een top web hosting onderhoud. Of, lees verder om uit te zoeken hoe u deze animatie op uw eigen site kunt bereiken.

  • Ontdek de nieuwe grens van CSS-animatie

01. Documentinitiatie

De eerste stap is om de structuur van de webpagina te initiëren. Dit bestaat uit de HTML-container die verantwoordelijk is voor het opslaan van de hoofd- en lichaamsecties. Terwijl de hoofdverantwoordelijkheid van het hoofdgedeelte is om de externe CSS te laden, zal het lichaamsdeel de HTML-inhoud opslaan die in stap 2 is gemaakt. 

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& LT; HOOFD & GT;
& LT; TITLE & GT; TYPING EFFECT & LT; / TITLE & GT;
& LT; LINK REL = "Stylesheet" Type = "Tekst / CSS" HREF = "Styles.css" / GT;
& LT; / HOOFD & GT;
& LT; BODY & GT;
*** Stap 2 hier
& LT; / BODY & GT;
& LT; / HTML & GT;

02. HTML-inhoud

Het HTML-gehalte bestaat uit een container die de klasse 'typen' gebruikt. Dit zal door de CSS worden gebruikt om het typingeffect toe te passen op een kinderelementen. Het onderliggende-inhoudselement is gemaakt van een H1-tag, maar u kunt een ander element gebruiken, zoals 'P' om het element als een alinea te maken. 

 & lt; div class = "typen" & GT;
  & LT; H1 & GT; Zet hier uw titel ... & LT; / H1 & GT;
& LT; / DIV & GT;

03. CSS-initiatie

Maak een bestand met de naam 'Styles.css'. De eerste stap van de CSS definieert het document en de lichaamscontainers om het volledige browservenster te dekken zonder enige zichtbare randafstand. De standaardkleuren voor de zwarte pagina Achtergrond en witte tekstkleuren zijn ook ingesteld in deze stap. Inhoudselementen op de pagina erven de kleur die in deze stap is ingesteld als hun standaardkleur. 

 ​​Lichaam, HTML {
  Weergave: blok;
  Breedte: 100%;
  Hoogte: 100%;
  Achtergrond: # 000;
  Kleur: #fff;
  Vulling: 0;
  marge: 0;
}

04. Kinderen typen

Alle kinderen binnen de typcontainer zijn ingesteld om over één regel weer te geven zonder het gebruik van tekstverpakking. Het belangrijkste is dat deze kinderelementen de 'typing'-animatie hebben toegepast. Deze animatie is ingesteld om meer dan vijf seconden te spelen met 50 frame snapshots - waardoor het verspringende typingeffect mogelijk is. 

 ​​.Tping & GT;​
  overloop verborgen;
  White-Space: Nowrap;
  Animatie: typinganim 5s stappen (50);
}

05. Gezichtsogen

Het effect wordt ook vergezeld door een geanimeerd gezicht dat de getypte tekst lijkt te vertellen. Deze stap maakt de ogen van dit gezicht als een CSS 'virtueel' element met behulp van de na selector. De ogen worden geplaatst ten opzichte van de bovenliggende tekst, met de inhoud van de inhoud als twee stiptekstkarakters. 

 ​​.Tping & GT; *::na{
  inhoud: ". .";
  Weergave: blok;
  Positie: absoluut;
  TOP: 1EM;
  Links: .35em;
}

06. Gezichtsmond

Zoals met de ogen, wordt de mond van het gezicht gemaakt van een CSS-virtueel element - deze keer met behulp van de voordat selector. De mond is gepositioneerd in verband met het bovenliggende tekstelement, evenals een grensradius om te verschijnen met een afgeronde vorm.

De typingspeak Animatie wordt toegepast; Het duurt gedurende 0,5 seconden met behulp van twee animatie-frames. Met de animatie die vijf keer wordt herhaald, is de totale animatietijd 2,5 seconden. 

 ​​.Tping & GT; *::voordat{
  inhoud: "";
  Positie: absoluut;
  Weergave: blok;
  Top: 2.1em;
  Links: .25em;
  Breedte: 1em;
  Hoogte: .1em;
  Border-Radius: 100%;
  Achtergrond: #fff;
  Animatie: TypingPeak .5S Stappen (2);
  Animatie-iteratie-telling: 5;
}

07. Animatiedefinities

Deze stap definieert de animaties waarnaar wordt verwezen door elementen die in eerdere stappen zijn gemaakt. De typinganim Animatie die is gebruikt voor het typ-effect verandert zijn element van geen breedte tot volledige breedte. De typingspeak Animatie die wordt gebruikt voor de mond van het gezicht verandert zijn element van het verschijnen vlak tot meer open. 

 ​​@Keyframes typinganim {
  van {breedte: 0}
  naar {breedte: 100%}
​
@KeyFRAMES typingspeak {
  0% {Breedte: 1em; Hoogte: .1em}
  100% {breedte: 1em; Hoogte: .5em;​
​
***

Heb je ontwerpbestanden om op te slaan?Upgrade je cloud opslag Dus het is aan het werk.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 275 van Creative Web Design Magazine Web Designer. Koop Probleem 275 hier of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

  • Maak slick ui-animaties
  • Informatie over het CSS-scherm onroerend goed
  • Maak een geanimeerd stoommekst-effect

Procedures - Meest populaire artikelen

Verken de gegevensvisualisatie met P5.JS

Procedures Jan 30, 2026

(Afbeelding Credit: Net Magazine) P5.JS is de meest recente JavaScript-implementatie van de beroemde desktop Creative..

Hoe een wolf te tekenen

Procedures Jan 30, 2026

Als je onder de knie hebt Hoe een hond te tekenen , je zou vergeven zijn om te denken dat je gemakkelijk een wolf zou kunnen trekken. Terwij..

Tackle Portrait Painting met oliën

Procedures Jan 30, 2026

Deze workshop gaat over het maken van een portretolieverfschilderij met betekenis. Het gaat ook om mijn idee voor een serie die d..

Hoe schaal te bereiken in uw schilderijen

Procedures Jan 30, 2026

In deze tutorial zullen we een aantal basisprincipes overgaan die het idee van grote schaal in je eigen stukken zullen communiceren. Ik gebruik potloden en oliën voor deze tutorial, maar je ..

Hoe te schilderen als een 19e-eeuwse meester

Procedures Jan 30, 2026

De 19e eeuw was een geweldige tijd voor kunst. Kunstenaars werden in hoge mate gehouden en het publiek werd opgeleid over kunst. ..

Teken een potloodportret van een hond

Procedures Jan 30, 2026

Bij het tekenen van PET-portretten, hoeft u het niet alleen te weten Hoe dieren te trekken : De taak wordt de pers..

Inleiding tot bruikbaarheidstests

Procedures Jan 30, 2026

Een succesvol webproduct voldoet niet alleen aan de behoeften van uw organisatie, maar ook de behoeften van uw gebruikers. Bruikbaarheid testen - vroeg gedaan en vaak - is een kritieke manier..

Hoe Manga-stijl haar in beweging te maken

Procedures Jan 30, 2026

Aan het leren Hoe manga te tekenen is geen gemakkelijke prestatie. Dus, om het gemakkelijk gemakkelijk mogelijk te maken, volg ik een eenvoudig stapsgewijze proces dat beweging..

Categorieën