Creați un efect de text 3D animat

Jan 24, 2026

să

Iubire pierduta de către Canada Jam3. Este o poezie interactivă frumoasă întunecată, gata, cu inima reală cu privire la sentimentele durabile în jurul iubirii pierdute. Layout-ul site-ului a fost construită utilizând HTML5 cu GSAP. Biblioteca care alimentează animația, una dintre cele mai vizuale caracteristici izbitoare este textul animat 3D care aduce într-adevăr poezia iubirii a pierdut viața.

Faceți efecte interactive 3D de tipografie

Se pare impresionant ca iadul și nu este greu să încorporezi în munca ta pentru a crea o angajare experiența utilizatorului ; Iată cum sa terminat.

Doriți să faceți propriul site angajat? Încercați a. Builder de site-uri web instrument și păstrați lucrurile să funcționeze fără probleme prin alegerea dreptului web hosting serviciu.

Love Lost's 3D text comes right out of the screen at the viewer — Iubirea textului 3D al lui Lost vine imediat din ecran la spectator

01. Inițierea documentului HTML

Primul pas este definirea structurii documentului HTML. Aceasta include recipientul HTML care inițiază documentul, care conține secțiunile capului și corpului. În timp ce secțiunea capului este folosită în principal pentru a încărca fișierul CSS extern, secțiunea corpului va stoca conținutul vizibil al paginii create în pasul 2.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; titlu & gt; Mișcarea 3D Text & Lt; / titlu & gt;
& lt; link rel = "Stylesheet" Type = "Text / css" href = "stiluri.css" / & gt;
& lt; / head & gt;
& lt; corp & gt;
*** Pasul 2 aici
& lt; / corp & gt;
& lt; / html & gt;

02. Conținut HTML vizibil

Conținutul vizibil HTML constă dintr-un container de articol care conține textul vizibil. Partea importantă a containerului de articol este atributul "animat de date", care va fi referit de CSS pentru a aplica efectele vizuale. Textul din interiorul articolului este realizat dintr-o etichetă H1 pentru a indica faptul că conținutul este titlul principal al paginii.

 & lt; articole-animate = "mutare în" & gt;
  & lt; h1 & gt; salut acolo! & lt; / h1 & gt;
& lt; / articol & gt;

03. Inițierea CSS

Creați un fișier nou numit "Styles.Css". Primul set de instrucțiuni setă containerul și corpul HTML al paginii pentru a avea un fundal negru, precum și nici o dispărare de frontieră vizibilă. Albul este, de asemenea, stabilit ca culoarea implicită a textului pentru toate elementele copilului de pe pagină pentru a moșteni; Evitarea culorii negre implicite a conținutului de text pare să fie invizibilă.

 HTML, corpul {
  Context: # 000;
  Padding: 0;
  Marja: 0;
  Culoare: #ffff;
}

04. Container de animație

Containerul de conținut menționat cu atributul "animate de date" are stiluri specifice aplicate. Dimensiunea sa este setată pentru a se potrivi cu dimensiunea completă a ecranului utilizând unitățile de măsurare VW și VH, precum și ușor rotite. Se aplică o animație numită "mișcare", care va dura o durată de 20 de secunde și va repeta infinit.

 [Date-Animate = "Mutare în"] {
  Poziție: rudă;
  Lățime: 100VW;
  Înălțime: 100VH;
  Opacitate: 1;
  Animație: Movei 20s Infinite;
  Text-align: centru;
  Transformare: Rotire (20DEG);
}

05. Inițierea animației

Animația "Movelin" menționată în pasul anterior necesită o definiție utilizând @keyframes. Primul cadru care începe la 0% din animație stabilește dimensiunea implicită a fontului, poziționarea textului și umbra vizibilă. În plus, elementul este setat cu opacitate zero, astfel încât acesta este inițial invizibil - adică. afișat în afara vizualizării.

 @keyframes Movelin {
  0% {
  Font-dimensiune: 1em;
  stânga: 0;
  Opacitate: 0;
  Umbra de text: Nici unul;
  }
  *** Pasul 6 Aici
}

06. Animați în vedere

By using multiple shadows you can enhance the 3D effect — Folosind mai multe umbre, puteți îmbunătăți efectul 3D

Următorul cadru este plasat la 10% prin animație. Acest cadru stabilește opacitatea pe deplin vizibilă, rezultând că textul fiind animat treptat în vizualizare. În plus, se adaugă mai multe umbre cu valori culori albastre și descrescătoare pentru a da iluzii de adâncime 3D la text.

 10%
{
  Opacitate: 1;
  Text-umbra:
  .2em -.2em 4px #aa,
  .4em -.4em 4px # 777,
  .6Em -.6em 4px # 444,
  .8em -.8em 4px # 111;
}
*** Pasul 7 Aici

07. Finalizarea animației

Cadrele finale apar la 80% și la sfârșitul animației. Acestea sunt responsabile pentru creșterea dimensiunii fontului și deplasarea elementului spre stânga. Setările noi sunt, de asemenea, aplicate pentru umbra textului de a anima, de asemenea, decolorarea textului din punct de vedere al cadrelor de la 80% la 100%.

80% {
  Dimensiune font: 8EM;
  stânga: -8em;
  Opacitate: 1;
}
100% {
  Font-dimensiune: 10EM;
  stânga: -10Em;
  Opacitate: 0;
  Text-umbra:
  .02em -.02em 4px #aaa,
  .04em -.04em 4px # 777,
  .06em -.06em 4px # 444,
  .08Em -.08em 4px # 111;
}
***

NOTĂ: Indiferent de proiectul pe care îl îmbarcăm, având Stocare in cloud Acest lucru poate face față este esențial (ghidul nostru va ajuta).

Acest articol a fost publicat inițial în numărul 273 al revistei Creative Web Design Web Designer. Cumpărați problema 273 aici sau Aboneaza-te la designerul web aici .

Articole similare:

Creați un efect de text neon strălucitor
Cum să depanați animațiile web
Creați storyboard-uri pentru animații web

Creați un efect de text 3D animat

01. Inițierea documentului HTML

02. Conținut HTML vizibil

03. Inițierea CSS

04. Container de animație

05. Inițierea animației

06. Animați în vedere

07. Finalizarea animației

să - Cele mai populare articole

Compositing în animație: Aflați elementele de bază

Cum să întoarceți ziua în noapte în Photoshop

Creați efecte de colaj în browser cu CSS

5 moduri de a stimula SEO-ul site-ului dvs.

Cum se proiectează o experiență chatbot

Cum de a stăpâni Anatomia Creaturii

11 sfaturi pentru crearea unui peisaj apos în 3D

Cum se îmbunătățește performanța site-urilor de comerț electronic

Categorii