WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Error 404 Animation
437
ByBy.inc
Open In Editor
Publish Your Code
Recommended
20 September 2025
CSS Loading Spinner Animation
7 November 2024
toggle with light animation
6 September 2025
CSS Nostalgia Glitch Photo Animation
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) */