Extrait HTML d'animation de texte 3D

1,301 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 March 2026

Jeu HTML FNAF 4 - Jouez à Five Nights at Freddy's 4

12 January 2026

Chargeur de jeux HTML : Émulateur NES avec bouton Jouer

27 January 2026

Code d'intégration du jeu Granny 2 WebGL

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