<div class="wrapper">
<p class="glitch">
<span>G</span>
<span>L</span>
<span>I</span>
<span>T</span>
<span>C</span>
<span>H</span>
</p>
<p class="glitch_fixed">
<span>G</span>
<span>L</span>
<span>I</span>
<span>T</span>
<span>C</span>
<span>H</span>
</p>
<p class="glitch_opacity">
<span>G</span>
<span>L</span>
<span>I</span>
<span>T</span>
<span>C</span>
<span>H</span>
</p>
</div>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
overflow: hidden;
background: #000;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-left: 0px;
transform: translateX(-50%) translateY(-50%);
}
.glitch {
font-size: 30px;
text-align: center;
position: relative;
animation: shake .4s infinite;
animation-direction: alternate;
}
.glitch_fixed {
font-size: 30px;
text-align: center;
position: relative;
color: #EEEEEE;
animation: color .4s infinite;
animation-direction: alternate;
}
.glitch_opacity {
font-size: 30px;
text-align: center;
position: relative;
color: #EEEEEE;
position: absolute;
top: 0;
left: -2px;
animation: show .2s infinite;
animation-direction: alternate;
}
.glitch_opacity span {
color: #F802F8;
}
@keyframes show {
50% {
opacity: 0;
text-shadow: 2px 2px #AAE90E;
}
}
@keyframes color {
50% {
color: #b1b1b1;
}
}
@keyframes shake {
0% {
transform: translate(2px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(0px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(2px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(2px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
// for extend
.span {
color: #0301FA;
animation: glitch .4s linear infinite;
animation-direction: alternate;
position: absolute;
transform: translateY(0px);
}
.glithc span {
position: absolute;
}
.glitch span:first-child {
@extend .span;
left: 0;
}
.glitch span:nth-child(2) {
@extend .span;
left: 25px;
}
.glitch span:nth-child(3) {
@extend .span;
left: 50px;
}
.glitch span:nth-child(4) {
@extend .span;
left: 75px;
}
.glitch span:nth-child(5) {
@extend .span;
left: 100px;
}
.glitch span:nth-child(6) {
@extend .span;
left: 125px;
}
@keyframes glitch {
0% {
transform: translateY(-10%);
transform: translateX(-5%);
}
50% {
transform: translateY(-10%);
transform: translateX(-10%);
color: #01FA01;
}
100% {
transform: translateY(10%);
transform: translateX(5%);
color: #FA0103;
clip: rect(40px, 0px, 40px, 0px);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.