falha na máquina da realidade

Abrir no Editor Video Publique Seu Código

Recomendado

9 June 2025

Alternador de temas do modo escuro com LocalStorage

24 November 2024

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

falha na máquina da realidade

Recomendado

Pena caindo

Alternador de temas do modo escuro com LocalStorage

flor para minha menina

HTML

CSS

JS

Recomendado

Pena caindo

Alternador de temas do modo escuro com LocalStorage

flor para minha menina

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS