Contenedor de animación de píxeles CSS

1,283 byby.createsite

Remix Abrir en el editor Publica tu código

Recomendado

12 December 2025

Ejemplo de código de interruptor de palanca suave CSS

23 August 2024

lector de mp3 en html, css y js

22 August 2025

Formulario de inicio de sesión y registro con autenticación biométrica

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background-color: #15171c;
      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: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }

.pixel1 {-webkit-filter: blur(5px); filter: blur(5px); animation: pixel-decay 3s infinite linear;}
    .pixel2 {-webkit-filter: sepia(100%); filter: sepia(100%); animation: pixel-decay 3s infinite linear;}
    .pixel3 {mix-blend-mode: difference; animation: pixel-decay 3s infinite linear;}
    .pixel4 {-webkit-transform: rotate(4deg); transform: rotate(4deg); animation: pixel-decay 2.5s infinite linear; }

/* Pixel Layer Animation */
    @keyframes pixel-decay {
      0% {
        opacity: 1;
      }
      25% {
        opacity: 0.8;
        /* Diminishing color intensity */
        transform: scale(1.1);box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
      }
      50% {
        opacity: 0.5;
        transform: scale(0.8);
      }
      75% {
        opacity: 0.2;
        /* Glitch effect */
        animation-timing-function: ease-in-out;
        transform: translate(2px, 2px) rotate(-2deg); box-shadow: 0 0 2px rgba(255, 255, 0, 0.8);
      }
      100% {
        opacity: 0;
      }
    }