WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Pixel Animation Container
649
byby.createsite
Open In Editor
Publish Your Code
Recommended
19 November 2025
Login Register Form HTML CSS Biometric Auth
11 September 2025
CSS Animation Code Block Example
7 November 2024
CSS Ribbon
HTML
Copy
CSS
Copy
* { 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; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */