Cara Membuat Efek Glitch Hover Menggunakan CSS
HobbyTekno - Postingan ini adalah Lanjutan dari postingan Cara Membuat Efek Glitch Aktif Menggunakan CSS.
Kali ini kita akan membuat Efek Hover, jadi bukan efek aktif lagi. Efek ini akan muncul saat kita mengarahkan kursor pada bagian atau text yang ingin diberi efek glitch. Langsung saja berikut caranya.
Langkah-Langkah Membuat Efek Glitch Hover Menggunakan CSS
1. Salin kode CSS berikut diatas </b:skin> atau </style> agar effect glitchnya muncul.
/* Text Glitch Hover */2. Untuk memanggil atau memunculkannya kita hanya perlu menyalin kode HTML berikut pada bagian yang di inginkan. misalkan pada Postingan.
.hobbyteknoGlitch:hover {
color: #000;
position: relative;
animation: hobbyteknoGlitch1 2.5s infinite;
-moz-animation: hobbyteknoGlitch1 2.5s infinite;
-webkit-animation: hobbyteknoGlitch1 2.5s infinite;
-o-animation: hobbyteknoGlitch1 2.5s infinite;
}
.hobbyteknoGlitch:hover::before, .hobbyteknoGlitch:hover::after {
content: attr(data-text);
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.hobbyteknoGlitch:hover::before {
color: #000;
animation: hobbyteknoGlitch2 2.5s infinite;
-moz-animation: hobbyteknoGlitch2 2.5s infinite;
-webkit-animation: hobbyteknoGlitch2 2.5s infinite;
-o-animation: hobbyteknoGlitch2 2.5s infinite;
}
.hobbyteknoGlitch:hover::after {
color: #000;
animation: hobbyteknoGlitch3 2.5s infinite;
-moz-animation: hobbyteknoGlitch3 2.5s infinite;
-webkit-animation: hobbyteknoGlitch3 2.5s infinite;
-o-animation: hobbyteknoGlitch3 2.5s infinite;
}
@keyframes hobbyteknoGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@-webkit-keyframes hobbyteknoGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@keyframes hobbyteknoGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes hobbyteknoGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@keyframes hobbyteknoGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes hobbyteknoGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
<div class="hobbyteknoGlitch" data-text="Hover Glitch">Hover Glitch</div>Hasilnya akan seperti berikut.
Hover Glitch
Sekian Cara Membuat Efek Glitch Hover Menggunakan CSS, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar
No comments for "Cara Membuat Efek Glitch Hover Menggunakan CSS"
Post a Comment