CSS Glitch effect

HTML
<a href="#" class="glitch">CODEPAD</a>
SCSS
body { background-color: #000; color: #fff; } .glitch { font-size: 130px; line-height: 1; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; text-decoration: none; color: #fff; &:before, &:after{ display: block; content: 'CODEPAD'; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .8; } &:after { color: #f0f; z-index: -2; animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite } &:before { color: #0ff; z-index: -1; animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite } } @keyframes glitch { 0% { -webkit-transform: translate(0); transform: translate(0) } 20% { -webkit-transform: translate(-5px, 5px); transform: translate(-5px, 5px) } 40% { -webkit-transform: translate(-5px, -5px); transform: translate(-5px, -5px) } 60% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px) } 80% { -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px) } to { -webkit-transform: translate(0); transform: translate(0) } }
JAVASCRIPT
Expand for more options Login