Öncelikle Aşağıdaki HTML kodunu sitemizde <body> etiketi arasında istediğimiz yere yazıyoruz.
HTML KODU:
<a href="#" class="glitch" data-glitch="Explore">Explore</a>
Daha Sonra Aşağıdaki CSS kodunu Style dosyamıza yapıştırıyoruz.
CSS KODU:
body {
background-color: #232323;
}
.glitch {
font: {
size: 8.125em;
family: 'Raleway', sans-serif;
weight: 700;
}
text-decoration: none;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
color: #fff;
letter-spacing: 5px;
&:before, &:after {
display: block;
content: attr(data-glitch);
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: .8;
} &:after {
color: #f0f;
z-index: -2;
} &:before {
color: #0ff;
z-index: -1;
}
&:hover {
&:before {
animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both 5
}
&:after {
animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both 5
}
}
}
@media only screen and (max-width: 400px) {
.glitch {
font-size: 3em;
}
}
@keyframes glitch {
0% {
transform: translate(0)
}
20% {
transform: translate(-5px, 5px)
}
40% {
transform: translate(-5px, -5px)
}
60% {
transform: translate(5px, 5px)
}
80% {
transform: translate(5px, -5px)
}
to {
transform: translate(0)
}
}
İşlem bu kadar explorer yazan yere istediğiniz şeyi yazabilirsiniz.
