CSS Pixel Animation Container

Open In Editor Publish Your Code

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

CSS Pixel Animation Container

Recommended

Responsive CSS Card

Parallax scroll animation

Admin Dashboard HTML CSS

HTML

CSS

JS

Recommended

Responsive CSS Card

Parallax scroll animation

Admin Dashboard HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS