Double Move Image Effect



Try touch me ~
Assalamualaikum semua.


Ok harini nak share tuto baru sket. Tak perlu cerita banyak , cuba sentuh gambar kat atas. Yes,great.
Itu lah tuto hari ni. Hehe..

Ok lets start!

  • Dashboard > Template > Edit Html > Click icon yang mcm ►> Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a.img {
animation:  1s ease-out;
-moz-animation: 1s ease-out;
-webkit-animation:  2s ease-out;
-o-animation:  1s ease-out;
 border-radius: 5px;
  -moz-box-shadow: -2px -2px 11px #ADADAD;
-webkit-box-shadow: -2px -2px 11px #ADADAD;
box-shadow: -2px -2px 11px #ADADAD;}
img:hover {
animation: meninas3 0.4s ease-out;
-moz-animation: meninas3 0.4s ease-out;
-webkit-animation: meninas3 0.4s ease-out;
-o-animation: meninas3 0.4s ease-out;}

@-webkit-keyframes  meninas3
{0% {-webkit-transform: translate(0px) rotate(0deg) scale(1.3); }
50% {-webkit-transform:  translate(-10px) rotate(0deg); scale(1.3); }
100% {-webkit-transform:  translate(10px) rotate(0deg); scale(1.3); }}
@-moz-keyframes  meninas3
{0% {-webkit-transform: translate(0px) rotate(0deg) scale(1.3); }
50% {-webkit-transform:  translate(-10px) rotate(0deg); scale(1.3); }
100% {-webkit-transform:  translate(10px) rotate(0deg); scale(1.3); }}
@-o-keyframes  meninas3
{0% {-webkit-transform: translate(0px) rotate(0deg) scale(1.3); }
50% {-webkit-transform:  translate(-10px) rotate(0deg); scale(1.3); }
100% {-webkit-transform:  translate(10px) rotate(0deg); scale(1.3); }}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !
  • Kalau jadi atau tak jadi bagi tau ye, mungkin Yura boleh perbaiki code yang salah :)

No comments

Awak mehla komen? satu komen pun jadilah :')