Glitch Text Effect Using Only HTML & CSS

◘ Download Files From Here :
◘ Code Editor : Atom

Track: NIVIRO - Flashes [NCS Release]
Music provided by NoCopyrightSounds.

[rakeshmanathana]

I started my CSS journey with this channel. Thanks for sharing amazing videos!

[rupeshpoudel]

Its been so long i have not seen your videos .
I WILL BE BACK ON CODING AFTER MY EXAM OVER IN FEW MONTHS....
FINALLY I WILL BE RESTARTING MY CODING...

[xlMauroxPlayOfficial]

i use dreamviewer 2020 and when i put #id::before it does'nt work, i mean, the color of "before" don't change

[mrsilvuple]

Why can not be set to Movie mode on Youtube? It seems like that it sends bakc to the vide page.

[rupeshpoudel]

I love your tutorial so much
Thank you for this....

[GSKStudios]

This video was released on my birthday.

[kiritoyukii]

A very useful and awesome tutorial!Thank you for sharing!

[KidooSama]

man, i love your work, you are a genius!!

[kedarsangare]

It's been a long day....
Without you my friend....
Oh I'll till you all about it when I see you

Seriously... Wayyyy

[mapachu]

You are the best ! Can you make tv glitch effect please?

[sharadpatel]

I have a question brother which software/tool did you use to see real-time website development(/design) in the side??

[coleheffernan]

@DarkCode what atom package do you use to auto close your tags?

[narendrawadhwa]

Hello Dark code I am facing one problem and that Problem is that when I use ur codes in html it work only on me but I can't share it to anyone. And in blogger I use to have add ur html code in classic theme but how to add CSS in blogger classic theme

[HaloElite]

Really nice! Can you also get this effect by using text-shadows?

[junglivre]

Music intro: Culture Code - Feel Again

[Play-umxs]

DarckCode, tem como criar um App usando HTML, CSS, e JS???

[guilherm...]

css code:

body {
margin: 0;
padding: 0;
background: black;
font-family: 'Montserrat', sans-serif;

}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
color: #fff;
text-transform: uppercase;
font-size: 60pt;
text-align: center;
font-weight: 500;
letter-spacing: 3px;
}
.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 2s infinite;
}

.text::after {
color: #1d64e9;
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;
}
}

[RushPlayOfficialChannel]

Hey can you tell me the editor's name?

[Viperdwarrior]

Where is the glitch effect you were about to show?

[nurrocky]

check his/her channel for awesome stuff..