Criar um efeito de texto 3D animado

Sep 14, 2025

Como

Amor perdido pelo Canadá Jam3. é um poema interativo lindamente escuro e pronto para celular com coração real sobre os sentimentos duradouros em torno do amor perdido. O layout do site foi construído usando html5 com o Gsap Biblioteca alimentando sua animação, uma das suas características mais visualmente marcantes é o seu texto 3D animado que realmente traz a poesia de amor perdido para a vida.

Faça efeitos de tipografia 3D interativos

Parece impressionante como o inferno, e não é difícil incorporar em seu próprio trabalho para criar um envolvimento experiência de usuário ; Veja como isso é feito.

Quer fazer seu próprio site envolvente? Tente A. Construtor de sites ferramenta, e manter as coisas funcionando sem problemas escolhendo o direito hospedagem na web. serviço.

Love Lost's 3D text comes right out of the screen at the viewer — O texto 3D do amor do amor vem fora da tela no espectador

01. Inicie o documento HTML

O primeiro passo é definir a estrutura do documento HTML. Isso inclui o contêiner HTML que inicia o documento, que contém as seções da cabeça e do corpo. Enquanto a seção principal é usada principalmente para carregar o arquivo CSS externo, a seção do corpo armazenará o conteúdo da página visível criado na etapa 2.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; 3D Movimento de texto & lt; / title & gt;
& lt; link rel = "Stylesheet" tipo = "texto / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; corpo e gt;
*** Etapa 2 aqui
& lt; / corpo & gt;
& lt; / html & gt;

02. Conteúdo HTML visível

O conteúdo HTML visível consiste em um contêiner de artigos que contém o texto visível. A parte importante do contêiner do artigo é o atributo 'Data-Animate', que será referenciado pelo CSS para aplicar os efeitos visuais. O texto dentro do artigo é feito de uma tag H1 para indicar que o conteúdo é o título principal da página.

 & lt; artigo Data-Animate = "Mover em" & GT;
  & lt; h1 & gt; ola lá! & lt; / h1 & gt;
& lt; / Artigo & GT;

03. Iniciação de CSS.

Crie um novo arquivo chamado 'Styles.css'. O primeiro conjunto de instruções definiu o contêiner HTML da página e o corpo para ter um fundo preto, bem como nenhum espaçamento de borda visível. O branco também é definido como a cor de texto padrão para todos os elementos filho na página herdar; Evitar a cor preta padrão do texto que faz conteúdo parecem ser invisíveis.

 HTML, corpo {
  Antecedentes: # 000;
  preenchimento: 0;
  Margem: 0;
  cor: #fff;
}

04. Recipiente de animação.

O contêiner de conteúdo referenciado com o atributo 'Data-Animate' tem estilos específicos aplicados. Seu tamanho é definido para corresponder ao tamanho total da tela usando unidades de medição VW e VH, além de serem ligeiramente girados. Uma animação chamada "mover" é aplicada, que durará uma duração de 20 segundos e se repetirá infinitamente.

 [Data-Animate = "Mover em"] {
  Posição: Relativo;
  Largura: 100VW;
  Altura: 100vh;
  opacidade: 1;
  Animação: mover 20s infinito;
  Alinhamento de texto: centro;
  Transformar: girar (20DEG);
}

05. Iniciação de animação

A animação 'Movein' referenciada na etapa anterior requer uma definição usando @keyframes. O primeiro quadro a partir de 0% da animação define o tamanho padrão da fonte, o posicionamento do texto e a sombra visível. Além disso, o item é definido com zero opacidade para que seja inicialmente invisível - ou seja. exibido fora de vista.

 @keyframes mover {
  0% {
  Tamanho da fonte: 1EM;
  Esquerda: 0;
  opacidade: 0;
  Sombra de texto: nenhuma;
  }
  *** PASSO 6 AQUI
}

06. Animate em vista

By using multiple shadows you can enhance the 3D effect — Usando várias sombras, você pode aprimorar o efeito 3D

O próximo quadro é colocado em 10% através da animação. Este quadro define a opacidade para visível totalmente visível, resultando no texto gradualmente sendo animado em exibição. Além disso, várias sombras são adicionadas com valores de cores azuis e decrescentes para dar as ilusões de profundidade 3D ao texto.

 10%
{
  opacidade: 1;
  Sombra de texto:
  .2em-2em 4px #AAA,
  .4em -.4em 4px # 777,
  .6em -.6em 4px # 444,
  .8em -.8em 4px # 111;
}
*** Etapa 7 aqui

07. Finalizando a animação

Os quadros finais ocorrem em 80% e no final da animação. Estes são responsáveis por aumentar o tamanho da fonte e mover o elemento para a esquerda. Novas configurações também são aplicadas para a sombra do texto para animar, enquanto também desaparecendo o texto fora de vista das estruturas de 80% para 100%.

80% {
  Tamanho da fonte: 8EM;
  Esquerda: -8em;
  opacidade: 1;
}
100% {
  Tamanho da fonte: 10em;
  Esquerda: -10em;
  opacidade: 0;
  Sombra de texto:
  .02EM -.02EM 4PX #AAA,
  .04em -.04em 4px # 777,
  .06em -.06em 4px # 444,
  .08em -.08em 4px # 111;
}
***

Nota: seja qual for o projeto que você esteja embarcando, tendo armazenamento na núvem Isso pode lidar é essencial (nosso guia ajudará).

Este artigo foi originalmente publicado em Edição 273 da revista Creative Web Design Web Designer. Comprar edição 273 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

Crie um efeito de texto de néon brilhante
Como depurar animações da web
Criar storyboards para animações da web

Criar um efeito de texto 3D animado

01. Inicie o documento HTML

02. Conteúdo HTML visível

03. Iniciação de CSS.

04. Recipiente de animação.

05. Iniciação de animação

06. Animate em vista

07. Finalizando a animação

Como - Artigos mais populares

17 dicas para desenhar rostos mangá

Como desenhar uma pessoa

10 coisas que você não sabia que poderia fazer com o Photoshop

Como pintar um castelo com sketchup

Procrie tutorial: novas ferramentas exploradas

12 dicas para iluminação 3D realista

Construa um site de comércio eletrônico a partir do zero

Criar telhas ornamentadas em substânciaer

Categorias