WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Página de erro 404 animada com coração e partículas
373
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
25 March 2025
Um código por andrej.social.network
10 July 2025
Animação de interface flutuante CSS
12 April 2025
Um Código de Farah
HTML
Copy
ERRO 404: Felicidade Não Encontrada
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #141C26; /* Tons de preto para combinar com a estética digital */ 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; } .heart { position: absolute; width: 0; height: 0; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 80px solid #F82672; /* Cor vermelha vibrante */ animation: heartbeat 2s linear infinite; } @keyframes heartbeat { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2) rotate(10deg); opacity: 0.3; } 100% { transform: scale(1); opacity: 1; } } .error-message { font-family: 'Arial', sans-serif; font-size: 32px; color: #F92672; position: absolute; transform: rotate(-15deg); opacity: 0; animation: fade-in 0.5s ease-in-out forwards; } .particle { position: absolute; width: 10px; height: 10px; background-color: #F8F8F2; border-radius: 50%; animation: pulsate 1.5s ease-in-out infinite; } @keyframes pulsate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */