Vibrate Menu Hover



Assalamualaikum, hari ni Yura nak buat tutorial. Untuk yang tanya kat twitter tu, Yura buat esok InsyaAllah.

Ok cuba hoverkan menu dibawah, dan nanti akan vibrate2 gitu. Try it out!

Home Tuto About Freebies Contact

Kalau awak berminat, mari Yura ajarkan mcm mana nak letak ^^

  • Dashboard > Layout >Add Gadget > HTML/JavaScript 
  • Copy semua code dibawah ye :
<style>
@-webkit-keyframes gangorra {
from {-webkit-transform: rotate(10deg);}
to {-webkit-transform: rotate(-10deg);}
}
@-moz-keyframes gangorra {
from {-moz-transform: rotate(10deg);}
to {-moz-transform: rotate(-10deg);}
}
@-o-keyframes gangorra {
from {-o-transform: rotate(10deg);}
to {-o-transform: rotate(-10deg);}
}
mn {display: inline-block;
font-family: 'Fjalla One', cursive;
font-size: 12px; /*Size tulisan */
background: #fe579c; /* Warna Background*/
padding: 2px;
text-align: center;
text-transform: uppercase;
border-radius: 5px;
color: #fff; /* Warna Font */
cursor: pointer;
text-shadow: 2px 2px 0px #e9508f; /*Shadow untuk font */
width: 90px; /* Kelebaran Menu*/
}
mn:hover {
    -webkit-animation-name: gangorra;
    -webkit-animation-duration: .01s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
-moz-animation-name: gangorra;
    -moz-animation-duration: 0.1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
-o-animation-name: gangorra;
    -o-animation-duration: 0.1s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;}
</style>
<center>
<a href="LINK"><mn>Home</mn></a>
<a href="LINK">
<mn>Tuto</mn>
</a>
<a href="LINK">
<mn>About</mn>
</a>
<a href="LINK">
<mn>Freebies</mn>
</a>
<a href="LINK>
<mn>Contact</mn>
</a>
</center>

  • Lepas dah paste kat dlam kotak Html/Javascript tu, anda boleh lah ubah nama menutab (yang warna purple tu)  dan letakkan link yang sepatutnya. 
  • Warna dan font sudah diterangkan dalam code diatas. Anda boleh ubah ikut citarasa.

2 comments

Awak mehla komen? satu komen pun jadilah :')