Contenedor de animación de píxeles CSS

786 byby.createsite

Abrir en el editor Video Publica tu código

Recomendado

24 November 2025

Código fuente HTML5 del juego aleatorio Basket

15 September 2025

Ejemplo de animación de cuadrícula CSS

23 August 2025

Plantilla HTML/CSS/JS para formulario de inicio de sesión y registro

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

Recomendado

Código fuente HTML5 del juego aleatorio Basket

Ejemplo de animación de cuadrícula CSS

Plantilla HTML/CSS/JS para formulario de inicio de sesión y registro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS