Pixel Explosion Animation
High-contrast pixel explosion effect with vibrant colors on dark background
Code
.pixel-explosion-container {
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
border-radius: 8px;
}
.pixel {
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 2px;
animation: pixel-burst 2s infinite ease-out;
}
.pixel:nth-child(1) { background: #ff0000; animation-delay: 0s; }
.pixel:nth-child(2) { background: #ff9900; animation-delay: 0.1s; }
.pixel:nth-child(3) { background: #ffff00; animation-delay: 0.2s; }
.pixel:nth-child(4) { background: #00ff00; animation-delay: 0.3s; }
.pixel:nth-child(5) { background: #00ffff; animation-delay: 0.4s; }
.pixel:nth-child(6) { background: #0000ff; animation-delay: 0.5s; }
.pixel:nth-child(7) { background: #9900ff; animation-delay: 0.6s; }
.pixel:nth-child(8) { background: #ff00ff; animation-delay: 0.7s; }
@keyframes pixel-burst {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% {
transform: translate(
calc(-50% + (random() * 200 - 100)px),
calc(-50% + (random() * 200 - 100)px)
) scale(0);
opacity: 0;
}
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="pixel-explosion-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="pixel"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="pixel"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="pixel"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="pixel"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="pixel"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="pixel"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="pixel"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="pixel"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>