Desplácese para existir

1,290 byby.createsite

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

30 August 2024

Efecto de paralaje del control deslizante

11 February 2026

Plantilla HTML para la comunidad china

18 December 2025

Código para insertar en el juego HTML5 de BitLife Life Simulator

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."
    */