Frammento HTML di animazione di testo 3D

315 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Frammento HTML di animazione di testo 3D

Consigliato

24 June 2025

Elite Real Estate: Appartamenti, Ville, Case in Vendita e in Affitto

3 March 2025

Casella di ricerca

17 July 2025

Modulo di registrazione per l'accesso con rotazione 3D HTML CSS

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; }
    }

Consigliato

Elite Real Estate: Appartamenti, Ville, Case in Vendita e in Affitto

Casella di ricerca

Modulo di registrazione per l'accesso con rotazione 3D HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS