WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
estado de fluxo
715
byby.createsite
Abrir no Editor
Publique Seu Código
Recomendado
25 May 2025
Um Código de Liamgilles76
13 June 2025
Um Código de Metehan
17 May 2025
login moderno
HTML
Copy
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; } /* Animações --------------------------------------------- */ .snippet { position: relative; width: 80px; height: 30px; background-color: #1f2937; border: 2px solid rgba(255, 255, 255, 0.3); animation: flow 3s ease infinite alternate; /* Animação de base */ } /* @keyframes cria a animação individual */ @keyframes flow { 0% { transform: translateX(0) rotate(0deg); /* Posicionamento inicial */ opacity: 1; } 50% { transform: translateX(10px) rotate(180deg); /* Posicionamento e rotação */ opacity: 0.5; } 100% { transform: translateX(0) rotate(360deg); /* Volta ao início */ opacity: 1; } } /* Visual */ .snippet:nth-child(1) { animation-delay: 0s; } .snippet:nth-child(2) { animation-delay: 0.2s; } .snippet:nth-child(3) { animation-delay: 0.4s; } .snippet:nth-child(4) { animation-delay: 0.6s; } .snippet:nth-child(5) { animation-delay: 0.8s; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */