Desplácese para existir

965 byby.createsite

Abrir en el editor Publica tu código

Recomendado

11 March 2024

Plantilla HTML CSS para sitio web de portafolio

25 August 2025

Plantilla HTML para sitio web de películas

31 January 2026

Cargador WebGL para juegos de Unity de jardín de infantes

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