Extrait HTML d'animation de texte 3D

1,112 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 July 2025

Entrée de téléchargement de fichier avec icône SVG

28 August 2025

Site Web d'architecture et de conception avec Tailwind CSS

27 January 2025

Un site de journal réactif

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