WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación de error CSS 404
624
byby.createsite
Abrir en el editor
Video
Publica tu código
0
Recomendado
15 October 2024
Botón de modo oscuro y modo nocturno
18 December 2025
Cargador de juegos Unity WebGL Slope Plus
26 January 2025
Un código de alqsdeus
HTML
Copy
ERRO 404
CSS
Copy
/* Foundation CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: url("./thumb.jpg") no-repeat center center; background-size: cover; 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: 25%; max-width: 75%; width: 75%; height: 25%; top:15%; overflow-y: hidden; box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .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; } .loading-element { position: relative; width: 100px; height: 100px; background: #f2c464; border-radius: 50%; animation: loading-animation 1s linear infinite; } @keyframes loading-animation { 0% { transform: scale(1); } 50% { transform: scale(1.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } 100% { transform: scale(1); box-shadow: none; } } .error-message { position: relative; z-index: 10; font-size: 30px; color: #f2c464; } .error-message::before { content: ""; position: absolute; top: -20px; left: -10px; width: 50px; height: 20px; background: #f2c464; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .error-message::after { content: ""; position: absolute; top: 20px; left: -10px; width: 50px; height: 20px; background: #f2c464; clip-path: polygon(0 0, 0 100%, 50% 100%); } /* Descrição: Este código simula um erro que ecoa na tela, representando a luta contínua com o debugging. */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */