Webleb - UI Elements - glitch in the reality machine

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #000;
      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: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background-color: #000;
    }

/*--------------------*/
    /* 100s de recarregos... */
    .infiniteLoop {
      position: absolute; 
      width: 100%;
      height: 100%;
      top: 0; 
      left: 0;
      animation: loop 15s linear infinite;
    }

@keyframes loop {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }

.screen{
      position: absolute; 
      width: 80%;
      height: 80%;
      animation: scrollStop 30s linear infinite;
      /* Defina a posição inicial de cada tela */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* Exemplo: tela inicial vista, tela 2 - conteúdo vazio */
      
      background-color: #333;
      border-radius: 10px;
    }

.content-container {
      position: absolute; 
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
    }
    .content {
      font-family: 'Arial', sans-serif;
      color: #fff; 
      text-align: center; 
      font-size: 2em; 
    }

/* 
    # Animação do Scroll Paralisia Simulation
    */

glitch in the reality machine

Recommended

Halloween Matching Game

Blur login form

Flip coin game

HTML

CSS

JS

Recommended

Halloween Matching Game

Blur login form

Flip coin game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS