Opprett en animert 3D-tekst effekt

Sep 13, 2025

hvordan

Tapt kjærlighet [1. 3] av Canada's. Jam3. [1. 3] Er et vakkert mørkt, mobilklart interaktivt dikt med ekte hjerte om de varige følelsene rundt tapt kjærlighet. De Nettstedslayout ble bygget ved hjelp av HTML5 med GSAP Biblioteket som driver animasjonen, en av de mest visuelt slående funksjonene er den animerte 3D-teksten som virkelig bringer kjærligheten tapts poesi til livet.

Lag interaktive 3D-typografiske effekter

Det ser imponerende ut som helvete, og det er ikke vanskelig å innlemme i ditt eget arbeid for å skape en engasjerende Brukererfaring ; Slik er det gjort.

Vil du lage ditt eget engasjerende nettsted? Prøv A. Nettstedbygger verktøy, og hold ting som kjører jevnt ved å plukke høyre Web Hosting. service.

Love Lost's 3D text comes right out of the screen at the viewer — Kjærlighet tapte 3D-tekst kommer rett ut av skjermen på betrakteren

01. Start HTML-dokumentet

Det første trinnet er å definere strukturen til HTML-dokumentet. Dette inkluderer HTML-beholderen som initierer dokumentet, som inneholder hodet og kroppsdelene. Mens hovedavsnittet primært brukes til å laste den eksterne CSS-filen, lagrer kroppsdelen det synlige siden innholdet som er opprettet i trinn 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; 3D tekstbevegelse & lt; / title & gt;
& lt; link rel = "Stylesheet" type = "tekst / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; body & gt;
*** Trinn 2 her
& lt; / body & gt;
& lt; / html & gt;

02. Synlig HTML-innhold

Det synlige HTML-innholdet består av en artikkelbeholder som inneholder den synlige teksten. Den viktige delen av artikkelbeholderen er "data-animate" -attributtet, som vil bli referert til CSS for å anvende de visuelle effektene. Teksten inne i artikkelen er laget av en H1-tag for å indikere at innholdet er sidens hovedtittel.

 & lt; artikkelen data-animate = "flytte inn" & gt;
  & lt; h1 & gt; hei der! & lt; / h1 & gt;
& lt; / article & gt;

03. CSS-initiering

Opprett en ny fil kalt 'Styles.css'. Det første settet med instruksjoner angir sidens HTML-beholder og kropp for å ha en svart bakgrunn, så vel som ingen synlig grenseavstand. Hvit er også satt som standard tekstfarge for alle barnelementer på siden for å arve; Unngå standard svart farge på tekstfremstilling, synes å være usynlig.

 html, kropp {
  Bakgrunn: # 000;
  polstring: 0;
  margin: 0;
  farge: #fff;
}

04. Animasjonsbeholder

Innholdsbeholderen referert til "Data-animate" -attributtet har spesifikke stiler som brukes. Dens størrelse er satt til å matche den fulle størrelsen på skjermen ved hjelp av VW og VH måleenheter, samt å være litt rotert. En animasjon som heter 'Movein', brukes, som vil vare i en varighet på 20 sekunder og vil gjenta uendelig.

 [data-animate = "flytte inn"] {
  posisjon: relativ;
  Bredde: 100vw;
  Høyde: 100VH;
  opasitet: 1;
  Animasjon: Movein 20s uendelig;
  Tekstjustering: Senter;
  Transform: Roter (20DEG);
}

05. Animasjonsinitiering

Den "Movein" animasjonen som refereres i forrige trinn, krever en definisjon ved å bruke @keyframes. Den første rammen som starter ved 0% av animasjonen, setter standard skriftstørrelse, tekstposisjonering og synlig skygge. I tillegg er elementet satt med null opacity slik at den er i utgangspunktet usynlig - dvs. Vises ute av visning.

 @keyframes movein {
  0% {
  FONT-STØRRELSE: 1EM;
  Venstre: 0;
  opasitet: 0;
  Tekstskygge: ingen;
  }
  *** Trinn 6 her
}

06. Animere til visning

By using multiple shadows you can enhance the 3D effect — Ved å bruke flere skygger kan du forbedre 3D-effekten

Den neste rammen er plassert til 10% gjennom animasjonen. Denne rammen setter opasiteten til fullt synlig, noe som resulterer i at teksten gradvis blir animert til visning. I tillegg tilsettes flere skygger med blå og reduserer fargeverdier for å gi illusjonene på 3D-dybden til teksten.

 10%
{
  opasitet: 1;
  Tekstskygge:
  .2EM -.2EM 4PX #AAA,
  .4EM -.4EM 4PX # 777,
  .6EM -.6EM 4PX # 444,
  .8EM -.8EM 4PX # 111;
}
*** Trinn 7 her

07. Fullfør animasjonen

De endelige rammene forekommer på 80% og i slutten av animasjonen. Disse er ansvarlige for å øke skriftstørrelsen og flytte elementet mot venstre. Nye innstillinger brukes også for tekstskyggen for å animere mot, samtidig som du falmer teksten utenom vender ut fra rammer 80% til 100%.

80% {
  FONT-STØRRELSE: 8EM;
  venstre: -8em;
  opasitet: 1;
}
100% {
  FONT-STØRRELSE: 10EM;
  Venstre: -10em;
  opasitet: 0;
  Tekstskygge:
  .02EM -.02EM 4PX #AAA,
  .04em -.04em 4px # 777,
  .06em -.06em 4px # 444,
  .08EM -.08EM 4PX # 111;
}
***

Merk: Uansett hvilket prosjekt du går på, har skylagring som kan takle er viktig (vår guide vil hjelpe).

Denne artikkelen ble opprinnelig publisert i utgave 273 av Creative Web Design Magazine webdesigner. Kjøp problem 273 her [1. 3] eller Abonner på webdesigner her [1. 3] .

Relaterte artikler:

Lag en glødende neon tekst effekt
Hvordan feilsøke web animasjoner
Lag storyboards for web animasjoner

Opprett en animert 3D-tekst effekt

01. Start HTML-dokumentet

02. Synlig HTML-innhold

03. CSS-initiering

04. Animasjonsbeholder

05. Animasjonsinitiering

06. Animere til visning

07. Fullfør animasjonen

hvordan - Mest populære artikler

Hvordan bygge en blogg med Jekyll

Hvordan tegne en arm

Takle Portrettmaleri med oljer

Hvordan korrigere en feilaktig sammensetning

Rebuild A 2004 Flash Website for 2018

Nivå opp spillkarakterer med kreativ montering

Lag blandede blekk med InDesign

Hvordan bruke blandingsformer til å animere tegn

Kategorier