Webleb - Snippets de Código - Animação de erro 404 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. */

Animação de erro 404 CSS

Recomendado

Espátula de arrasto

Jardim de falhas

Um Código de Metehan

HTML

CSS

JS

Recomendado

Espátula de arrasto

Jardim de falhas

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS