Example of  CSS Text Glicth Effect




    

.
Helloo guys,Thank you For Visit my Blog  Share and Subscribe My blog. 

My presonal Site visit  Jeel Bhatti

My new Css Effect Glitch-text Effect .


Download code Click Here:-- Download
.
Effect Code:------


<html>
<head>
<title>J.B Web Devlopers</title>
<style>//css
h1{
margin-left:20%;
margin-top:20%;
}

.glitch-effect{
position:relative;
text-transform:uppercase;
color:#007EFF;
font-size:50px;
letter-spacing:10px;
}

.glitch-effect::before, .glitch-effect::after{
content:'J.B Web developer';
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
text-transform:uppercase;
opacity:0.8;
}

.glitch-effect::before{
color:#14e2e2;
z-index:-1;
animation:effect 0.5s ease infinite;
}

.glitch-effect::after{
color:#FF2A78;
z-index:-2;
animation: effect 0.5s ease reverse infinite;
}

@keyframes effect{
0%{transform: translate(0,0)}
20%{transform: translate(-5px,3px)}
40%{transform: translate(-3px,-3px)}
60%{transform: translate(3px,3px)}
80%{transform: translate(3px,-3px)}
100%{transform: translate(0)}
}

</style>
</head>
<body>//html
<h1 class="glitch-effect">J.B Web Developer</h1>
</body>
</html>