◄ Min  Size Fonts: + | - | ± Color: Max ►

Make Effect Vibrates on Image

Trik vibrate atau getar-getar pada gambar layaknya tarian vibrator barangkali saingan dari tarian gangnam harlem shake :p Hasil akhir yakni, ketika kita melakukan hover pada image, maka image tersebut akan bergetar-getar ke kiri dan ke kanan. Posisi awal sih diam saja itu si gambar, tapi kala cursor mendekat akan terjadi shake it yeah yeah. oooohhh :))
Lagi-lagi trick ini berhasil dibuat karena kedahsyatan varibael CSS versi III.

Demo Vibrating Effect

Demo ini hanya berjalan pada browsingan mozilla, karena Koben hanya memasukan kode CSS support ke firefox :d Tapi tenang saja, untuk ramuan akan dikasih semua kodenya yang mendukung di browsingan utama :)
.iconsV a {
    width: 40px;
    float: left;
}
.iconsV a:hover img {
    cursor: pointer;
    animation: vibrate 0.1s linear 0s infinite;
    -moz-animation: vibrate 0.1s linear 0s infinite;
    -webkit-animation: vibrate 0.1s linear 0s infinite;
    -o-animation: vibrate 0.1s linear 0s infinite;
}
@keyframes vibrate {
0%   {margin-left: 0px;}
25%  {margin-left: -3px;}
50%  {margin-left: 0px;}
75%  {margin-left: 3px;}
100% {margin-left: 0px;}
}
@-moz-keyframes vibrate {
0%   {margin-left: 0px;}
25%  {margin-left: -3px;}
50%  {margin-left: 0px;}
75%  {margin-left: 3px;}
100% {margin-left: 0px;}
}
@-webkit-keyframes vibrate {
0%   {margin-left: 0px;}
25%  {margin-left: -3px;}
50%  {margin-left: 0px;}
75%  {margin-left: 3px;}
100% {margin-left: 0px;}
}
@-o-keyframes vibrate {
0%   {margin-left: 0px;}
25%  {margin-left: -3px;}
50%  {margin-left: 0px;}
75%  {margin-left: 3px;}
100% {margin-left: 0px;}
}
Markup HTML
<div class="iconsV">
<a href="LINK 1" title=""><img src="LINK IMAGE 1" alt="" /></a>
<a href="LINK 2" title=""><img src="LINK IMAGE 2" alt="" /></a>
<a href="LINK 3" title=""><img src="LINK IMAGE 3" alt="" /></a>
<a href="LINK 4" title=""><img src="LINK IMAGE 4" alt="" /></a>
</div>
Kunjungi blog sumber berikut, acak-acak artikel yang ada di sana, khususon postingan mengenai CSS 3 ;) Please visit Techumber Blog
Happy blogging \m/
Loading...
XMake Effect Vibrates on Image
Membuat effect vibrate pada image agar menghasilkan efek bergetar pada gambar, layaknya tarian vibrator
Subscribe my posts Register For Free!

3 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE