Jak vytvořit animovaný typ psaní

Sep 11, 2025
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 nakreslit vlk

jak Sep 11, 2025

Pokud jste zvládli Jak nakreslit psa Měli byste být odpuštěni, abyste si mysleli, že bys mohl být také schopen kreslit vlka. Zatímc..

Jak malovat Elven Maiden

jak Sep 11, 2025

V tomto tutoriálu vás budu vést prostřednictvím mého procesu pro vytvoření podmanivého fantazie portrét Elven Maiden. J..

Barva vlnící se voda v oleji

jak Sep 11, 2025

Když malování vlníte vodu s něčím v něm, užíváte na úkol malování narušeného odrazu. To může být složité představit si představit, takže často rád, abych si udělal ..

Jak kreslit s afinitní fotografie pro iPad

jak Sep 11, 2025

Foto afinity pro iPad je skvělý editor fotek , Ale jak se Serifův app jízdní, pokud jde o vytvá�..

Barva originální tarotová karta

jak Sep 11, 2025

Když jsem dostal svou první tarotovou palubu, byl jsem okouzlen krásnou kresbou a příběhy, které doprovázely každou kart..

Vytvořte perfektní zprávy ve všech e-mailových klientech

jak Sep 11, 2025

Pro jakoukoli e-mailovou marketingovou kampaň do práce, e-mail se musí dostat do složky Doručená pošta a vyniknout ze všech ostatních. Příběh však nekončí. Váš e-mail musí d..

Malování Epic New York Scene

jak Sep 11, 2025

Pro tuto workshop maluje jeden z mých oblíbených předmětů: New York City Most. Maloval jsem Brooklyn Bridge mnohokrát v jiném světle, takže pro tento projekt jsem si vybral Manhatta..

Jak malovat zářivý květinový zátiší

jak Sep 11, 2025

Barva a textura nabízejí dokonalý způsob, jak dát živost na květinové zátiší. Tato demonstrace ukazuje, jak používá..

Kategorie