1 80 1000
<div class="glitch-wrapper">
<div class="glitch" data-glitch="glitch">glitch</div>
</div>
<style>
.glitch-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.glitch {
position: relative;
font-size: 80px;
font-weight: 700;
color: #000;
letter-spacing: 5px;
font-family: 'Arial', sans-serif;
z-index: 1;
}
.glitch:before,
.glitch:after {
display: block;
content: attr(data-glitch);
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
.glitch:before {
animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
color: $GLITCH_COLOR_1$;
z-index: -1;
}
.glitch:after {
animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
color: $GLITCH_COLOR_2$;
z-index: -2;
}
@keyframes glitch-color {
0% {
transform: translate(0);
}
20% {
transform: translate(-3px, 3px);
}
40% {
transform: translate(-3px, -3px);
}
60% {
transform: translate(3px, 3px);
}
80% {
transform: translate(3px, -3px);
}
to {
transform: translate(0);
}
}
</style>