WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation d'erreur CSS 404
441
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
12 December 2024
Curseur d'images pour Blogspot CSS3
13 April 2024
Bouton bascule HTML CSS
25 September 2025
Extrait d'animation de chargement CSS
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) */