High Contrast Bounce Grid
Vibrant bouncing shapes on high-contrast background with sync animation
Code
.bounce-grid-container {
width: 400px;
height: 300px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
padding: 16px;
border-radius: 8px;
}
.bounce-cell {
border-radius: 8px;
background: #ffffff;
animation: cell-bounce 1.5s infinite ease-in-out;
}
.bounce-cell:nth-child(odd) { background: #ff3d00; }
.bounce-cell:nth-child(even) { background: #00b8d4; }
.bounce-cell:nth-child(1) { animation-delay: 0s; }
.bounce-cell:nth-child(2) { animation-delay: 0.1s; }
.bounce-cell:nth-child(3) { animation-delay: 0.2s; }
.bounce-cell:nth-child(4) { animation-delay: 0.3s; }
.bounce-cell:nth-child(5) { animation-delay: 0.4s; }
.bounce-cell:nth-child(6) { animation-delay: 0.5s; }
.bounce-cell:nth-child(7) { animation-delay: 0.6s; }
.bounce-cell:nth-child(8) { animation-delay: 0.7s; }
.bounce-cell:nth-child(9) { animation-delay: 0.8s; }
.bounce-cell:nth-child(10) { animation-delay: 0.9s; }
.bounce-cell:nth-child(11) { animation-delay: 1.0s; }
.bounce-cell:nth-child(12) { animation-delay: 1.1s; }
@keyframes cell-bounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.7); opacity: 0.8; }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-grid-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="bounce-cell"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>