Jak vytvořit animovaný typ psaní

Feb 2, 2026
jak

Při použití dobře, CSS Animace může přidat zájem a osobnost na vaše stránky. V tomto článku půjdeme, jak vytvořit animovaný efekt, který bude vaše typografie postupně vypadat postupně, jako by to bylo napsáno na psacím stroji. Můžete vidět příklad animace v akci na stránkách Krypton , kryptocurrency obchodování bot. Účinek je působivý a také je snadné implementovat.

Pro další snadné způsoby vytváření slušného webového designu, zkuste vynikající Webové stránky Builder. nebo nahoře web hosting servis. Nebo přečtěte, abyste zjistili, jak dosáhnout této animace na vlastní stránku.

  • Prozkoumejte novou hranici animace CSS

01. Zahájení dokumentu

Prvním krokem je iniciovat strukturu webové stránky. To se skládá z kontejneru HTML odpovědného za skladování hlavy a části těla. Zatímco hlavní odpovědnost hlavy je načíst externí CSS, část těla uloží obsah HTML vytvořený v kroku 2. 

 Doctype HTML & GT;
& lt; html & gt;
& lt; hlava & gt;
& lt; titul & gt; typing efektu & lt; / titul & gt;
& lt, link rel = "Stylesheet" type = "text / css" href = "styles.css" / gt;
& lt; / hlava & gt;
& lt; tělo & gt;
*** Krok 2 zde
& lt; / tělo & gt;
& lt; / html & gt;

02. HTML Obsah

Obsah HTML se skládá z kontejneru, který používá třídu "psaní". To bude používáno CSS aplikovat typ psaní na všechny podřízené prvky. Prvek obsahu dítěte je vyroben z tagu H1, ale můžete použít jiný prvek, jako je "P" pro vytvoření prvku jako odstavec. 

 & lt; divá třída = "psaní" & gt;
  & lt, h1 & gt; dát svůj titul tady ...

03. Zahájení CSS.

Vytvořit soubor nazvaný 'Styles.css'. Prvním krokem CSS definuje kontejnery dokumentu a tělesa pro pokrytí úplného okna prohlížeče bez viditelných mezer. V tomto kroku jsou také nastaveny výchozí barvy pro pozadí černé stránky a barevné barvy textu. Prvky obsahu v rámci stránky zdědí nastavenou barvu v tomto kroku jako výchozí barvy. 

 ​​Tělo, html {
  Displej: blok;
  šířka: 100%;
  výška: 100%;
  Pozadí: # 000;
  Barva: #fff;
  Polstrování: 0;
  marže: 0;
}

04. Psaní dětí

Všechny děti v rámci zadávacího kontejneru jsou nastaveny na zobrazení přes jeden řádek bez použití textu balení. A co je nejdůležitější, tyto podřízené prvky mají na ně "psaní" animace. Tato animace je nastavena na přehrávání během pěti sekund s 50 snímky rámečku - umožňující rozložený typ psaní. 

 ​​.typing & gt; * {
  Přetečení: skryté;
  Bílý prostor: Nowrap;
  Animace: Typinganim 5s kroky (50);
}

05. Tvář oči

Účinek je také doprovázen animovanou tvář, která vypadá, že vypráví napsaný text. Tento krok vytváří oči této tváře jako CSS 'virtuální' prvek pomocí po volič. Oči jsou umístěny vzhledem k nadřazenému textu, s jeho obsahem nastaveným jako dvě textové znaky. 

 ​​.typing & gt; *::po{
  obsah: ". .";
  Displej: blok;
  Pozice: absolutní;
  Top: 1em;
  vlevo: .35EM;
}

06. Tvářová ústa

Stejně jako s očima, ústa obličeje je vyrobena z virtuálního prvku CSS - tentokrát pomocí před volič. Ústa je umístěna ve vztahu k rodičovskému textovému prvku, stejně jako s okruhem hranice, aby se objevil se zaobleným tvarem.

. \ T typingspeak. Animace je aplikována; Vydrží 0,5 sekundy pomocí dvou snímků animace. S animací opakovat pětkrát, celková doba animace bude 2,5 sekundy. 

 ​​.typing & gt; *::před{
  obsah: "";
  Pozice: absolutní;
  Displej: blok;
  Top: 2.1EM;
  vlevo: .25EM;
  šířka: 1em;
  Výška: .1EM;
  okruh pohraničí: 100%;
  Pozadí: #fff;
  Animace: Typingspeak .5s kroky (2);
  Animace-iterace-počet: 5;
}

07. Definice animace

Tento krok definuje animace odkazované prvky vytvořenými v předchozích krocích. . \ T typinganim Animace, která byla použita pro typ psaní, změní jeho prvek z žádné šířky na celou šířku. . \ T typingspeak. Animace používaná pro ústa obličeje mění jeho prvek z objeví se k jednomu otevřeným. 

 ​​@Keyframes typinganim {
  z {šířka: 0}
  do {šířka: 100%}
}
@Keyframes typingspeak {
  0% {šířka: 1em; Výška: .1EM}
  100% {šířka: 1em; Výška: .5EM; }
}
***

Máte návrhy souborů zachránit?Upgrade Your. cloudové úložiště Takže je to na práci.

Tento článek byl původně publikován v čísle 275 tvůrčího webového designu časopisu Web Designer. Prodám vydání 275 zde nebo Přihlásit se zde web designer zde .

Související články:

  • Vytvořit SLICK UI Animace
  • Pochopení vlastnosti CSS Display
  • Vytvořte animovaný textový text

jak - Nejoblíbenější články

Jak nastavit a optimalizovat Smugmugový sklad

jak Feb 2, 2026

(Image Credit: Andre Furtado na pexels) Jednoduchý stavitel webových stránek, který také působí jako jeden z ..

Jak zapsat HTML kód rychleji

jak Feb 2, 2026

(Image Credit: budoucnost) Moderní webové stránky vyžadují spoustu HTML kódu. Komplexní uspořádání s více..

Kompozice v animaci: Naučte se základy

jak Feb 2, 2026

(Image Credit: BlackMagic Design) V tomto článku ponecháme do umění kompozice pro 3D. Prozkoumání toho, co je ..

Vytvořit anaglyfický efekt starého škola

jak Feb 2, 2026

(Image Credit: Travis Knight) Anaglyph effect je správný název pro klasický 3D styl, kde musíte nosit červené ..

Vytvořit animovaný CSS Art

jak Feb 2, 2026

(Image Credit: Tiffany Choong) Vytváření snímků CSS je zábavný způsob, jak praktikovat své dovednosti a vytv..

Nakreslete tužku portrét psa

jak Feb 2, 2026

Při kreslení pet portréty, nemusíte jen vědět Jak nakreslit zvířata : Úkolem je zachycení osobnosti toho..

Vytvoření aplikace, která shromažďuje data senzorů

jak Feb 2, 2026

Dnes, cenově dostupné platformy pro rozvoj propojených produktů se těší širokou dostupnost, a jsme viděli push pro zvý�..

Jak navrhnout animovaný hrdina

jak Feb 2, 2026

Následující tipy rozbijí můj proces pro animaci BINK pro Eric Miller Animation Studios 'Nadcházející webová řada. Bink je zvědavý malý námořní stvoření, který byl zajat a o..

Kategorie