Skapa en animerad 3D-texteffekt

Sep 11, 2025

Hur

Kärlek förlorad av Kanadas Jam3 Är en vackert mörk, mobil färdig interaktiv dikt med riktigt hjärta om de varaktiga känslorna runt förlorad kärlek. De Webbplatslayout byggdes med hjälp av HTML5 med Glapp Bibliotek som driver sin animering, en av sina mest visuellt slående funktioner är dess animerade 3D-text som verkligen ger kärlek förlorade poesi till liv.

Gör interaktiva 3D-typografiska effekter

Det ser imponerande ut som helvete, och det är inte svårt att införliva i ditt eget arbete för att skapa en engagerande användarupplevelse ; Så här är det klart.

Vill du göra din egen engagerande webbplats? Prova a Website Builder Verktyg och håll sakerna att springa smidigt genom att välja rätt webbhotell service.

Love Lost's 3D text comes right out of the screen at the viewer — Kärlek förlorad 3D-text kommer rätt ut ur skärmen på tittaren

01. Initiera HTML-dokumentet

Det första steget är att definiera strukturen i HTML-dokumentet. Detta inkluderar HTML-behållaren som initierar dokumentet, som innehåller huvud- och kroppssektionerna. Medan huvuddelen huvudsakligen används för att ladda den externa CSS-filen, lagrar kroppsdelen det synliga sidinnehållet som skapats i steg 2.

 & lt; doctype html & gt;
& lt; html & gt;
& lt; huvud & gt;
& lt; Titel & GT; 3d Text Rörelse & LT; / Titel & GT;
& lt; länk rel = "stylesheet" typ = "Text / css" href = "stilar.css" / & gt;
& LT; / Head & GT;
& lt; kropp & gt;
*** Steg 2 här
& LT; / Body & GT;
& lt; / html & gt;

02. Synligt HTML-innehåll

Det synliga HTML-innehållet består av en artikelbehållare som innehåller den synliga texten. Den viktiga delen av artikelbehållaren är attributet "data-animera", som kommer att refereras av CSS för att tillämpa de visuella effekterna. Texten i artikeln är tillverkad av en H1-tagg för att indikera att innehållet är sidans huvudtitel.

 & lt; artikel data-animate = "flytta in" & gt;
  & lt; H1 & GT; Hej där! & LT; / H1 & GT;
& lt; / Artikel & GT;

03. CSS-initiering

Skapa en ny fil som heter 'Styles.css'. Den första uppsättningen instruktioner Ange sidans HTML-behållare och kropp för att ha en svart bakgrund, liksom inget synligt gränsavstånd. Vit är också inställd som standard textfärg för alla barnelement på sidan för att ärva; Att undvika standard Svart färg av text som gör innehållet verkar vara osynligt.

 HTML, BODY {
  Bakgrund: # 000;
  Padding: 0;
  Marginal: 0;
  Färg: #fff;
}

04. Animationsbehållare

Innehållsbehållaren som refereras till attributet "Data-Animate" har specifika stilar som tillämpas. Dess storlek är inställd för att matcha den fulla storleken på skärmen med VW och VH-mätenheter, såväl som att vara något roterade. En animering som heter 'Movein' appliceras, som kommer att vara en varaktighet på 20 sekunder och kommer att upprepa oändligt.

 [data-animate = "flytta in"] {
  position: släkting;
  Bredd: 100vw;
  Höjd: 100VH;
  Opacitet: 1;
  Animering: Movein 20s oändlig;
  Text-Justera: Center;
  Transform: Rotera (20deg);
}

05. Animationsinitiering

Den "rörliga animationen som refereras i föregående steg kräver en definition med @keyframes. Den första ramen som börjar med 0% av animationen ställer in standardstorlek, textpositionering och synlig skugga. Dessutom är föremålet inställt med noll opacitet så att det är initialt osynligt - dvs. visas ur vyn.

 @keyframes movein {
  0% {
  FONT-STORLEK: 1EM;
  Vänster: 0;
  Opacity: 0;
  Text-Shadow: Ingen;
  }
  *** Steg 6 här
}

06. Animera i sikte

By using multiple shadows you can enhance the 3D effect — Genom att använda flera skuggor kan du förbättra 3D-effekten

Nästa ram är placerad på 10% genom animationen. Den här ramen sätter opaciteten för helt synlig, vilket resulterar i att texten gradvis är animerad i sikte. Dessutom läggs flera skuggor med blå och minskande färgvärden för att ge illusionerna av 3D-djupet till texten.

 10%
{
  Opacitet: 1;
  Text-Shadow:
  .2em-22 4px #aaa,
  .4EM -.4em 4px # 777,
  .6em -,6em 4px # 444,
  .8EM -,8EM 4PX # 111;
}
*** Steg 7 här

07. Slutförande av animationen

De sista ramarna uppstår vid 80% och i slutet av animationen. Dessa är ansvariga för att öka teckensnittstorleken och flytta elementet mot vänster. Nya inställningar appliceras också för textskuggan för att animera mot, samtidigt som du bleknar texten ur vyn från ramar 80% till 100%.

80% {
  FONT-STORLEK: 8EM;
  Vänster: -8EM;
  Opacitet: 1;
}
100% {
  FONT-STORLEK: 10EM;
  Vänster: -10
  Opacity: 0;
  Text-Shadow:
  .02EM -.02EM 4px #aaa,
  .04EM -.04EM 4px # 777,
  .06EM -.06EM 4PX # 444,
  .08EM -.08EM 4PX # 111;
}
***

Obs! Oavsett projekt du påbörjar, har molnlagring Det kan klara av är viktigt (vår guide hjälper).

Denna artikel publicerades ursprungligen i utgåva 273 av kreativ webbdesignmagasin webbdesigner. Köp utgåva 273 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

Skapa en glödande neon text effekt
Hur de felsöke webbanimationer
Skapa storyboards för webbanimationer

Skapa en animerad 3D-texteffekt

01. Initiera HTML-dokumentet

02. Synligt HTML-innehåll

03. CSS-initiering

04. Animationsbehållare

05. Animationsinitiering

06. Animera i sikte

07. Slutförande av animationen

Hur - Mest populära artiklar

Hantera reageringsformat tillstånd med Formik

Använd Brain.js för att bygga ett neuralt nätverk

Bygg en klientportal med WordPress

Gör gratis och snabba användarprov med Userlook

Hur man komprimerar bilder: En webbdesigners guide

Affinity Designer: Hur man använder Pixel Persona

Hur man väljer rätt prototypverktyg

Hur man börjar med oljemålning

Kategorier