Vytvořit animovaný 3D textový efekt

Feb 2, 2026

jak

Ztracená láska Kanadou Jam3. Je krásně tmavá, mobilní interaktivní báseň s pravým srdcem o trvalých pocitech kolem ztracené lásky. . \ T rozložení webových stránek byl postaven pomocí HTML5 s Gsap. Knihovna Powering jeho animace, jeden z jeho nejnavovalovějších rysů je jeho animovaný 3D text, který opravdu přináší lásku ztracené poezie k životu.

Vytvořit interaktivní 3D typografie

Vypadá to působivé jako peklo a není těžké začlenit do své vlastní práce, abyste vytvořili zapojení uživatelská zkušenost ; Zde je to, jak se to dělá.

Chcete udělat si vlastní záběr? Vyzkoušejte A. Webové stránky Builder. nástroj, a udržujte věci hladce vybíráním práva web hosting servis.

Love Lost's 3D text comes right out of the screen at the viewer — 3D text LOST LOST pochází přímo z obrazovky u prohlížeče

01. Zahajte dokument HTML

Prvním krokem je definovat strukturu dokumentu HTML. To zahrnuje kontejner HTML, který iniciuje dokument, který obsahuje sekce hlavy a těla. Zatímco sekce hlavy se používá primárně pro načtení externího souboru CSS, část těla ukládá obsah viditelné stránky vytvořený v kroku 2.

 Doctype HTML & GT;
& lt; html & gt;
& lt; hlava & gt;
& lt; titul & gt; 3d textový pohyb & 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. Viditelný obsah HTML

Viditelný obsah HTML se skládá z článku kontejneru, který obsahuje viditelný text. Důležitou součástí kontejneru článku je atribut 'datový animát', který bude odkazován CSS aplikovat vizuální efekty. Text uvnitř článku je vyroben z značky H1, což znamená, že obsah je hlavní titul stránek.

 & lt; článek Data-animace = "pohyb v" a gt;
  h1 & gt; hello tam! & lt; / h1 & gt;
& lt; / článek & gt;

03. Zahájení CSS.

Vytvořit nový soubor s názvem 'Styles.css'. První sada instrukcí nastavte kontejner HTML stránek a tělo mít černé pozadí, stejně jako žádné viditelné mezery mezery. Bílý je také nastaven jako výchozí barvu textu pro všechny podřízené prvky na stránce zdědit; Vyhýbání se výchozí černé barvě obsahu textu se zdá být neviditelný.

 HTML, tělo {
  Pozadí: # 000;
  Polstrování: 0;
  marže: 0;
  Barva: #fff;
}

04. Kontejner animace

Obsah obsahu odkazované s atributem "Data-animate" má specifické styly aplikované. Jeho velikost je nastavena tak, aby odpovídala plné velikosti obrazovky pomocí měrných jednotek VW a VH, stejně jako mírně otočené. Animace s názvem 'Movein' je aplikována, která bude trvat po dobu 20 sekund a bude opakovat nekonečně.

 [Data-animate = "pohyb v"] {
  Pozice: Relativní;
  šířka: 100vw;
  Výška: 100VH;
  Opacita: 1;
  Animace: přesun 20s nekonečný;
  Text-ALIGN: CENTER;
  transformovat: otočit (20deg);
}

05. Zahájení animace

"Animace přesunu odkazu odkazuje v předchozím kroku vyžaduje definici pomocí @KeyFrames. První snímek začínající na 0% animace nastaví výchozí velikost písma, umístění textu a viditelný stín. Položka je navíc nastavena s nulovou krytí, takže je zpočátku neviditelná - tj. vystaveny z pohledu.

 @KeyFres Movein {
  0% {
  Velikost písma: 1em;
  vlevo: 0;
  krytí: 0;
  textový stín: žádný;
  }
  *** Krok 6 zde
}

06. Animovat do výhledu

By using multiple shadows you can enhance the 3D effect — Pomocí více stínů můžete zvýšit 3D efekt

Další snímek je umístěn na 10% přes animaci. Tento rámeček nastavuje neprůhlednost plně viditelné, což má za následek, že text postupně oživuje. Kromě toho se s modrým a klesajícím barevným hodnotám přidává více stínů, které poskytují iluze 3D hloubky.

 10%
{
  Opacita: 1;
  Textový stín:
  .2EM -.2EM 4PX #AAA,
  .4EM -.4EM 4PX # 777,
  .6EM -.6EM 4PX # 444,
  .8EM -.8EM 4PX # 111;
}
*** Krok 7 zde

07. Dokončení animace

Závěrečné rámečky se vyskytují na 80% a na samém konci animace. Ty jsou zodpovědné za zvýšení velikosti písma a pohybu prvku směrem doleva. Nová nastavení se také použijí pro textový stín k animaci směrem k, přičemž také vybledne text z pohledu z rámců 80% až 100%.

80% {
  Velikost písma: 8em;
  vlevo: -8em;
  Opacita: 1;
}
100%{
  Velikost písma: 10em;
  vlevo: -10em;
  krytí: 0;
  Textový stín:
  .02EM -.02EM 4PX #AAA,
  .04EM -.04EM 4PX # 777,
  .06EM -.06EM 4PX # 444,
  .08EM -.08EM 4PX # 111;
}
***

Poznámka: jakýkoliv projekt, na kterém se pustíte, s cloudové úložiště To může vyrovnat je nezbytný (náš průvodce pomůže).

Tento článek byl původně publikován v čísle 273 Creative Web Design Magazine Web Designer. Prodám vydání 273 zde nebo Přihlásit se zde web designer zde .

Související články:

Vytvořit zářící neonový textový efekt
Jak ladit web animace
Vytvořit storyboards pro web animace

Vytvořit animovaný 3D textový efekt

01. Zahajte dokument HTML

02. Viditelný obsah HTML

03. Zahájení CSS.

04. Kontejner animace

05. Zahájení animace

06. Animovat do výhledu

07. Dokončení animace

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

Vytvořte si vlastní stylus s pouze 4 předměty pro domácnost (vážně)

Jak používat Referenční snímky: 13 Základní tipy pro umělce

Master Směšovací kartáč ve Photoshopu

Jak udělat a používat mahlstick pro malování

Jak vytvořit barevné světy, které vyprávějí příběh

Převést fotografii do sady VR

Top tipy pro malování expresivní ruce

Jak vytvořit animovaný webový banner ve Photoshopu

Kategorie