Text Link Glitch Effect
As seen at http://grislyfaye.com
by Brett
HTML
<a href="/dates" title="" data-text="This is a link" style="transition-delay: 0ms, 0ms;">This is a link</a>
CSS
body {
background: #000;
}
a {
display: block;
position: relative;
margin: 2em;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
outline: none;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
translate: translateY(0);
opacity: 1;
}
a:hover:before {
content: attr(data-text);
position: absolute;
top: 0;
right: 0;
left: -2px;
background: transparent;
color: #fff;
text-shadow: 2px 0 blue;
clip: rect(0,900px,0,0);
animation: glitch-animation-2 2s infinite linear alternate;
overflow: hidden;
}
a:hover:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 2px;
right: 0;
background: transparent;
color: #fff;
text-shadow: -2px 0 red;
clip: rect(0,900px,0,0);
animation: glitch-animation 2s infinite linear alternate;
overflow: hidden;
}
@keyframes glitch-animation {
0% {
clip: rect(38px, 9999px, 26px, 0);
}
5% {
clip: rect(22px, 9999px, 65px, 0);
}
10% {
clip: rect(2px, 9999px, 23px, 0);
}
15% {
clip: rect(41px, 9999px, 5px, 0);
}
20% {
clip: rect(51px, 9999px, 26px, 0);
}
25% {
clip: rect(69px, 9999px, 5px, 0);
}
30% {
clip: rect(65px, 9999px, 88px, 0);
}
35% {
clip: rect(60px, 9999px, 95px, 0);
}
40% {
clip: rect(9px, 9999px, 70px, 0);
}
45% {
clip: rect(9px, 9999px, 58px, 0);
}
50% {
clip: rect(32px, 9999px, 10px, 0);
}
55% {
clip: rect(80px, 9999px, 48px, 0);
}
60% {
clip: rect(91px, 9999px, 43px, 0);
}
65% {
clip: rect(30px, 9999px, 49px, 0);
}
70% {
clip: rect(30px, 9999px, 15px, 0);
}
75% {
clip: rect(52px, 9999px, 56px,...