problème dans la machine à réalité

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 April 2025

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

problème dans la machine à réalité

Recommandé

Un code de Metehan

Un code par ashimadison8

Un code par nathphr816

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code par ashimadison8

Un code par nathphr816

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS