WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Fuente de baile
825
byby.createsite
Abrir en el editor
Publica tu código
Recomendado
25 September 2025
Fragmento de código HTML para iniciar sesión y registrarse en Facebook
3 October 2025
Ejemplo de animación de reflexión CSS
20 March 2023
Barra de navegación Bootstrap responsiva
HTML
Copy
D
a
n
c
i
n
g
F
o
n
t
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } body { background-color: #000000; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: monospace; overflow: hidden; } /*container fonte */ .dancing-text { text-align: center; max-width: 600px; } /*estilo para cada letra individualmente, inclui animação */ .dancing-text span { display: inline-block; background: conic-gradient( from 45deg, #6b48ff, #a29bfe, #ffffff, #a29bfe, #6b48ff ); -webkit-text-fill-color: transparent; background-size: 100%; font-size:3rem; background-clip: text; animation: dance 4s ease-in-out infinite; text-shadow: 0 0 10px rgba(0, 128, 255, 0.8), 0 0 20px rgba(0, 128, 255, 0.6); } /*delay para cada letra individualmente */ .dancing-text span:nth-child(1) { animation-delay: 0s; } .dancing-text span:nth-child(2) { animation-delay: 0.1s; } .dancing-text span:nth-child(3) { animation-delay: 0.2s; } .dancing-text span:nth-child(4) { animation-delay: 0.3s; } .dancing-text span:nth-child(5) { animation-delay: 0.4s; } .dancing-text span:nth-child(6) { animation-delay: 0.5s; } .dancing-text span:nth-child(7) { animation-delay: 0.6s; } .dancing-text span:nth-child(8) { animation-delay: 0.7s; } .dancing-text span:nth-child(9) { animation-delay: 0.8s; } .dancing-text span:nth-child(10) { animation-delay: 0.9s; } .dancing-text span:nth-child(11) { animation-delay: 1s; } .dancing-text span:nth-child(12) { animation-delay: 1.1s; } /*animação */ @keyframes dance { 0%,100% { transform: rotateZ(20deg) translateY(-5px); } 50% { transform:rotateZ(-20deg) translateY(5px); } } .space{ margin-left:5px; margin-right:5px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */