Fragmento HTML de animação de texto 3D

1026 byby.createsite

Abrir no Editor Video Publique Seu Código

Recomendado

10 December 2025

Jogo Clicker em HTML com Renascimento, Melhorias e JavaScript

18 December 2025

Jogo Deepest Sword - Jogue online (HTML5)

22 May 2025

efeito prateado 3D

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.animation-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background-color: #000;
    }

/* Estilos para o texto */
    .letra {
      font-size: 4em;
      font-weight: bold;
      color: #0f0; /* Verde */
      text-align: center;
      animation: morph 5s linear infinite; /* Executa o animation 'morph' infinitamente */
    }
    
    @keyframes morph { /* Animação customizada */
      0%   { transform: rotate(0deg) scale(1); letter-spacing: 0em; }
      25%  { transform: rotate(2deg) scale(1.1); letter-spacing: 0.2em; }
      50%  { transform: rotate(-2deg) scale(0.9); letter-spacing: -0.2em; }
      75%  { transform: rotate(2deg) scale(1.05); letter-spacing: 0.15em; }
      100% { transform: rotate(0deg) scale(1); letter-spacing: 0em; }
    }

Recomendado

Jogo Clicker em HTML com Renascimento, Melhorias e JavaScript

Jogo Deepest Sword - Jogue online (HTML5)

efeito prateado 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS