Advanced Glitch Art
Cinema-quality glitch effect with color separation and scanline overlay
Code
.glitch-art-container {
position: relative;
width: 400px;
height: 250px;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.glitch-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
font-weight: 900;
color: #fff;
text-transform: uppercase;
position: relative;
}
.glitch-content::before,
.glitch-content::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.glitch-content::before {
color: #ff00ff;
left: 2px;
animation: glitch-1 2s infinite linear alternate-reverse;
}
.glitch-content::after {
color: #00ffff;
left: -2px;
animation: glitch-2 3s infinite linear alternate-reverse;
}
.glitch-art-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px);
pointer-events: none;
animation: scanline 8s linear infinite;
}
@keyframes glitch-1 {
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; transform: translate(0); }
20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.8; transform: translate(-4px, 4px); }
}
@keyframes glitch-2 {
0%, 29.999%, 32%, 82.999%, 84%, 84.999%, 90%, 100% { opacity: 1; transform: translate(0); }
30%, 31.999%, 83%, 83.999%, 85%, 89.999% { opacity: 0.8; transform: translate(4px, -4px); }
}
@keyframes scanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="glitch-art-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="glitch-content"</span> "attr-name"</span>>data-text</span>="CYBERPUNK"</span>>CYBERPUNK</"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>