Animated Neon Grid
Cyberpunk-style neon grid with scanning laser and pulse effects
Code
.neon-grid-container {
width: 400px;
height: 400px;
background: #000;
position: relative;
overflow: hidden;
border-radius: 8px;
}
.neon-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(to right, rgba(0, 255, 255, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
animation: grid-pulse 4s infinite ease-in-out;
}
.neon-laser {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, transparent, #00ffff, transparent);
box-shadow: 0 0 20px #00ffff;
animation: laser-scan 8s linear infinite;
}
.neon-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff00ff;
box-shadow: 0 0 15px #ff00ff;
animation: dot-pulse 2s infinite ease-in-out;
}
.neon-dot:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; }
.neon-dot:nth-child(2) { top: 60%; left: 70%; animation-delay: 0.5s; }
.neon-dot:nth-child(3) { top: 80%; left: 40%; animation-delay: 1s; }
@keyframes grid-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@keyframes laser-scan {
0% { left: 0%; }
50% { left: 100%; }
100% { left: 0%; }
}
@keyframes dot-pulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.5); opacity: 1; }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-grid-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-grid"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-laser"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-dot"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-dot"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-dot"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>