Contenedor de animación de píxeles CSS

332 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

18 July 2025

Fragmento HTML de animación de carga CSS

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

Contenedor de animación de píxeles CSS

Recomendado

Ilusión de pergamino infinito

Una página de inicio extraña

Fragmento HTML de animación de carga CSS

HTML

CSS

JS

Recomendado

Ilusión de pergamino infinito

Una página de inicio extraña

Fragmento HTML de animación de carga CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS