WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Fragmento HTML de animação de texto 3D
476
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
7 July 2025
Indicador do menu de navegação
16 October 2025
Exemplo de animação de carregamento CSS
15 September 2025
Animação de balão de pensamento CSS
HTML
Copy
3D
CSS
Copy
* { 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; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */