WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Estructura de animación de bloques CSS
673
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
2 June 2025
Un código de alejandrokundrah
28 July 2023
Barra de búsqueda con CSS
25 August 2024
Sistema solar 3D CSS
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1F2125; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background:transparent; } .container-block { position: relative; width: 200px; height: 200px; background: #fffff2; margin: 5px; } .block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, 0.1); opacity: 0; animation: appear .5s ease-in-out forwards 1s; } .block:nth-child(1) { animation-delay: 0s; } .block:nth-child(2) { animation-delay: 0.1s; } .block:nth-child(3) { animation-delay: 0.2s; } .block:nth-child(4) { animation-delay: 0.3s; } .block:nth-child(5) { animation-delay: 0.4s; } .block:nth-child(6) { animation-delay: 0.5s; } /* Esse efeito visual simula a sensação de bloqueio criativo, os blocos aparecem de forma desorganizada e ficam "atravessando" um ao outro, criando a impressão de caos mental */ @keyframes appear { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */