Digital deja vu

1,096 byby.createsite

Abrir en el editor Publica tu código

Recomendado

27 January 2025

Página de destino de una agencia de marketing digital

11 April 2026

Página de inicio de sesión HTML: Tema Matrix con autenticación por huella digital.

23 August 2025

Página de inicio de sesión HTML: Tema Matrix con autenticación por huella digital

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;
    }

.frame {
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      animation: digitalFrames 5s linear infinite;
    }
    @keyframes digitalFrames {
      0% { background-color: #007bff; transform-origin: center; }
      25% { background-color: #dc3545; transform: rotate(45deg) }
      50% { background-color: #ffc107; transform: rotate(90deg) }
      75% { background-color: #28a745; transform: rotate(135deg) }
      100% { background-color: #6c757d; transform: rotate(180deg) }
    }