Frammento HTML di animazione di testo 3D

896 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Frammento HTML di animazione di testo 3D

Consigliato

27 November 2024

Prodotti di carte

19 March 2025

Animazione delle ombre del testo

16 January 2026

Lettore di giochi Flash con emulatore Ruffle

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

Prodotti di carte

Animazione delle ombre del testo

Lettore di giochi Flash con emulatore Ruffle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS