WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animação de erro 404 CSS
623
byby.createsite
Abrir no Editor
Video
Publique Seu Código
0
Recomendado
17 December 2024
Terminal de hack
21 July 2025
Exemplo de cartão UNO HTML CSS
16 October 2025
Tela de carregamento animada em CSS com efeito de código
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) */