This is a new loading animation idea created by Darkcode. It is also simple but awesome. To see how it works, just click on the button Run Pen:
How to create a glitch text effect like TikTok
Step 1: Add Html
<div class="text middle" data-text="Glitch Effect">
Glitch Effect
</div>Step 2: Add CSS
body {
margin: 0;
padding: 0;
font-family: 'montserrat', sans-serif;
background: #000;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
color: #fff;
text-transform: uppercase;
font-size: 60px;
text-align: center;
letter-spacing: 14px;
}
.text::before,
.text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.text::before {
color: #ff00c1;
animation: glitch-effect 3s infinite;
}
.text::after {
color: #3498db;
animation: glitch-effect 2s infinite;
}
@keyframes glitch-effect {
0% {
left: -2px;
top: -2px;
}
25% {
left: 2px;
top: 0px;
}
50% {
left: -1px;
top: 2px;
}
75% {
left: 1px;
top: -1px;
}
100% {
left: 0px;
top: -2px;
}
}