Utwórz animowany efekt tekstu 3D

Jan 27, 2026

Jak

Zgubiona miłość przez Kanadę Jam3. jest pięknie ciemny, mobilny interaktywny wiersz z prawdziwym sercem o trwałe uczucia wokół zagubionej miłości. The. Układ strony internetowej. został zbudowany przy użyciu HTML5 z Gsap Biblioteka zasilająca jego animację, jednym z najbardziej wizualnie uderzających funkcji jest animowany tekst 3D, który naprawdę przynosi poezję miłości do życia.

Zrobić interaktywne efekty typografii 3D

Wygląda na imponująco jak piekło i nie jest trudno włączyć do własnej pracy, aby stworzyć angażowanie doświadczenie użytkownika ; Oto jak się robi.

Chcesz dokonać własnej witryny? Spróbuj A. Kreator strony internetowej Narzędzie i utrzymuj rzeczy płynnie, wybierając prawo hosting usługa.

Love Lost's 3D text comes right out of the screen at the viewer — Tekst 3D Love Lost wynika z ekranu w przeglądarce

01. Zainicjuj dokument HTML

Pierwszym krokiem jest zdefiniowanie struktury dokumentu HTML. Obejmuje to kontener HTML, który inicjuje dokument, który zawiera sekcje głowicy i ciała. Podczas gdy sekcja głowicy jest używana przede wszystkim do załadowania zewnętrznego pliku CSS, sekcja korpusu będzie przechowywać widoczną zawartość strony utworzonej w kroku 2.

 DocType HTML & GT;
& lt; html & gt;
& lt; Head & GT;
& lt; titled & GT; Ruch tekstowy 3D; / Title & GT;
& LT; Link Rel = "Arkusz stylów" Type = "Tekst / CSS" HREF = "Styles.cssss" / & GT;
& LT; / Head & GT;
& lt; body & gt;
*** Krok 2 tutaj
& lt; / body & gt;
& lt; / html & gt;

02. Widoczna zawartość HTML

Widoczna zawartość HTML składa się z kontenera artykułu zawierającego widoczny tekst. Ważną częścią kontenera artykułu jest atrybut "animowany danych", który zostanie przywołany przez CSS w celu zastosowania efektów wizualnych. Tekst wewnątrz artykułu jest wykonany z tagu H1, aby wskazać, że treść jest głównym tytułem strony.

 Artykuł Data-Animate = "Ruch w" & GT;
  & lt; h1 & gt; Hello tam! & LT; / H1 & GT;
& LT; / Article & GT;

03. Inicjacja CSS.

Utwórz nowy plik o nazwie "Styles.css". Pierwszy zestaw instrukcji ustawił kontener HTML strony i korpus, aby mieć czarne tło, a także brak widocznego odstępu granicznego. Biały jest również ustawiony jako domyślny kolor tekstu dla wszystkich elementów dziecka na stronie, aby dziedziczyć; Unikanie domyślnego czarnego koloru treści, które wydają się być niewidoczne.

 HTML, Ciało {
  Tło: # 000;
  Wyściółka: 0;
  Marża: 0;
  Kolor: #FFF;
}

04. Kontener animacji

Kontener treści, do którego przypisany jest atrybut "animacji danych" ma określone zastosowane style. Jego rozmiar jest ustawiony w celu dopasowania do pełnego rozmiaru ekranu za pomocą jednostek pomiarowych VW i VH, a także nieznacznie obrócony. Zastosowano animację o nazwie "Moven", która będzie trwać przez okres 20 sekund i powtórzy się nieskończenie.

 [Data-Animate = "Move in"] {
  Pozycja: krewna;
  Szerokość: 100vw;
  Wysokość: 100VH;
  nieprzezroczystość: 1;
  Animacja: Moven 20s Infinite;
  Tekst-Wyrównuj: Centrum;
  Transform: Obróć (20deg);
}

05. Inicjacja animacji

Animacja "Movena" odwołuje się w poprzednim kroku wymaga definicji za pomocą @keyframe. Pierwsza ramka począwszy od 0% animacji ustawia domyślny rozmiar czcionki, pozycjonowanie tekstu i widoczny cień. Dodatkowo element jest ustawiony wraz z zerową nieprzezroczystą, dzięki czemu jest początkowo niewidoczny - tj. wyświetlany z widoku.

 @keyframes Moven {
  0% {
  rozmiar czcionki: 1em;
  Po lewej: 0;
  nieprzezroczystość: 0;
  Tekst-Cień: Brak;
  }
  *** Krok 6 tutaj
}

06. Animuj w widoku

By using multiple shadows you can enhance the 3D effect — Używając wielu cieni, możesz poprawić efekt 3D

Następna ramka jest umieszczona na 10% za pomocą animacji. Rama ta ustawia nieprzezroczystość, aby w pełni widoczne, powodując, że tekst stopniowo jest animowany do widoku. Dodatkowo dodano wiele cieni z niebieskimi i malejącymi wartościami kolorów, aby dać iluzje głębokości 3D do tekstu.

 10%
{
  nieprzezroczystość: 1;
  cień tekstu:
  .2em -2em 4px #aaa,
  .4em -.4em 4px # 777,
  .6em -.6em 4px # 444,
  .8em -.8EM 4px # 111;
}
*** Krok 7 tutaj

07. Finalizowanie animacji

Ostateczne ramki występują na 80% i na samym końcu animacji. Są odpowiedzialne za zwiększenie rozmiaru czcionki i przesuwanie elementu w lewo. Nowe ustawienia są również stosowane do cienia tekstowego do animacji, a także zanikanie tekstu z widoku z ramek 80% do 100%.

80% {
  rozmiar czcionki: 8em;
  po lewej: -8em;
  nieprzezroczystość: 1;
}
100% {
  rozmiar czcionki: 10em;
  po lewej: -10em;
  nieprzezroczystość: 0;
  cień tekstu:
  .02EM -.02EM 4PX #aaa,
  .04EM -.04EM 4px # 777,
  .06EM -.06EM 4PX # 444,
  .08EM -.08EM 4PX # 111;
}
***

Uwaga: Niezależnie od tego projektu, ma magazyn w chmurze To może być niezbędne (nasz przewodnik pomoże).

Ten artykuł został pierwotnie opublikowany w wydaniu 273 kreatywnych projektantów WWW projektantów Web Design Magazine. Kup problem 273 lub Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

Utwórz świecący efekt tekstu neon
Jak debugować animacje internetowe
Utwórz storyboardy do animacji internetowych

Utwórz animowany efekt tekstu 3D

01. Zainicjuj dokument HTML

02. Widoczna zawartość HTML

03. Inicjacja CSS.

04. Kontener animacji

05. Inicjacja animacji

06. Animuj w widoku

07. Finalizowanie animacji

Jak - Najpopularniejsze artykuły

17 wskazówek dotyczących rysowania twarzy mangi

8 Cechy CSS State-the-art (i jak ich używać)

10 rzeczy, których nie wiedziałeś, możesz zrobić z Photoshopem

Zbuduj aplikacje mobilne krzyżowe z trzepotaniem Google

Robić realistyczne włosy 3D i futro w 3DS Max i V-Ray

Utwórz ruch dynamiczny w kompozycji

Cztery zasady strategii UX

Jak malować zakrzywione szkło na kasku kosmicznym

Kategorie