Animation d'erreur CSS 404

1,155 byby.createsite

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

13 April 2024

Carte CSS simple

19 October 2026

Lanceur de jeux d'arcade rétro en JavaScript et CSS

1 August 2025

Mouvement de balle - 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. */