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

CSS

/* 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. */

Recommandé

Curseur d'images pour Blogspot CSS3

Bouton bascule HTML CSS

Extrait d'animation de chargement CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS