<div class="glitch-container">
<h1>Welcome to the Glitch Zone</h1>
</div>
.glitch-container {
position: relative;
max-width: 600px;
width: 100%;
height: 400px;
overflow: hidden;
background: #00BFFF;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1{
text-align: center;
font-size: 32px;
color: #ff0037;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
transform: translate(0px, 150px);
display: block;
animation: glitch-animation .1s linear infinite;
}
@keyframes glitch-animation {
0%{
top: 0;
left: 0;
mix-blend-mode: multiply;
}
20%{
top: -5px;
left: -5px;
mix-blend-mode: difference;
}
40% {
top: 5px;
left: 5px;
mix-blend-mode: normal;
}
60% {
top: -5px;
left: 5px;
mix-blend-mode: multiply;
}
80% {
top: 5px;
left: -5px;
mix-blend-mode: difference;
}
100% {
top: 0px;
left: 0px;
mix-blend-mode: normal;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.