WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
fallo en la máquina de realidad
565
byby.createsite
Abrir en el editor
Publica tu código
Recomendado
10 October 2025
Contenedor de fragmentos de animación CSS
14 February 2025
Un código de Pedro_bugica
23 March 2025
Cartera de dinero
HTML
Copy
Loading...
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; } .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: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background-color: #000; } /*--------------------*/ /* 100s de recarregos... */ .infiniteLoop { position: absolute; width: 100%; height: 100%; top: 0; left: 0; animation: loop 15s linear infinite; } @keyframes loop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .screen{ position: absolute; width: 80%; height: 80%; animation: scrollStop 30s linear infinite; /* Defina a posição inicial de cada tela */ top: 50%; left: 50%; transform: translate(-50%, -50%); /* Exemplo: tela inicial vista, tela 2 - conteúdo vazio */ background-color: #333; border-radius: 10px; } .content-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .content { font-family: 'Arial', sans-serif; color: #fff; text-align: center; font-size: 2em; } /* # Animação do Scroll Paralisia Simulation */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */