Efect Hover

Tweet

Dibawah ini beberapa contoh efek hover dengan mengunakan css3 beserta kode-kode yang menghasilkan efek tersebut, sebagai acuan untuk mengkobinasikan efek-efek yang ada sehingga menghasilkan efek-efek yang lebih unik.

Cyiberart

.animasi_bengellz {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.animasi_bengellz:hover {
-webkit-transform:translate(0px, -20px);
-moz-transform:translate(0px, -20px);
-o-transform:translate(0px, -20px);
-transform:translate(0px, -20px);
}

Dengan animasi ini bisa menghasilkan efek kesegala arah, baik kanan, kiri, atas, bawah, serong atas, kiri, atas, bawah hanya dengan merubah bagian angka (0px, -20px)  Untuk kode css selanjutnya, saya tidak menampilkan kode css yang berwarna biru, saya anggap sudah termasuk dalam kode (biar tidak terlalu panjang)

Cyiberart

.animasi_cyiberart2 {
-kode css lainnya-
}
.animasi_cyiberart2:hover {
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
}

ini merupakan efek putar, kalian bisa menyesuikan putarannya, apakah mau penuh (360deg) atau hanya setengah putaran, untuk merubah arah putaran bisa tambahkan tanda minus - untuk perputarannya

Untuk efek selanjutnya, browser Opera belum suport hanya bisa berjalan baik dengan browser Chrome dan Firefox

Cyiberart

.animasi_cyiberart {
-kode css lainnya-
}
.animasi_cyiberart:hover {
-webkit-transform:scale(-1.0);
-moz-transform:scale(-1.0);
transform:scale(-1.0);
}

dengan efek ini bisa menghasilkan efek membesar (zoom) atau sebaliknya mengecil hanya dengan merubah scale-nya

Cyiberart

.animasi_bengellz {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
position: relative;
}
.animasi_bengellz:hover {
animation: border 5s infinite;
-moz-animation: border 5s infinite;
-webkit-animation: border 5s infinite;
}
@-webkit-keyframes gobig {
0%   {top:0px;width:250px; background:#808080;}
25%  {top:0px;width:300px;background:#333;}
50%  {top:50px; width:300px;background:#ccc;}
75%  {top:0px;width:300px;background:#ccc;}
100% {top:0px;width:250px;background:#808080;}}
@-moz-keyframes gobig {
0%   {top:0px;width:250px; background:#808080;}
25%  {top:0px;width:300px;background:#333;}
50%  {top:50px; width:300px;background:#ccc;}
75%  {top:0px;width:300px;background:#ccc;}
100% {top:0px;width:250px;background:#808080;}}
@keyframes gobig {
0%   {top:0px;width:250px; background:#808080;}
25%  {top:0px;width:300px;background:#333;}
50%  {top:50px; width:300px;background:#ccc;}
75%  {top:0px;width:300px;background:#ccc;}
100% {top:0px;width:250px;background:#808080;}}

Saya kira cukup contoh-contoh efek hover animasi menggunakan css3