Desplácese para existir

1,072 byby.createsite

Abrir en el editor Publica tu código

Recomendado

26 January 2026

Código HTML5 para insertar en el juego Escape Road

16 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

21 September 2024

Agregar botón para abrir y agregar datos de perfil con validación

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;
    }
    /* Animação: Infinito Loop deautant informação*/
    .scroll {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.1);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: scroll_loop 3s linear infinite;
    }

@keyframes scroll_loop {
      0% { transform: translateX(0) rotateX(0deg);} 
      100% { transform: translateX(-200px) rotateX(180deg);}
    }
    
    .text-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .info-box {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff;
      padding: 10px;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    /* Animações individualsas das informações */
    }

/* Este é  um exemplo simples 
     de animações camadadas que 
     se alinham com o conceito de
     intoxicação por informações."
    */