Laman

E S A ___ M R

Kamis, 22 Oktober 2015

Image Hover Shake

Assalamu'alaikum...
Blogku semakin sepi T_T, penyebab utama itu mungkin karena aku jarang posting di blog. Kedua, postinganku kadang gaje dan gimanaaaaa gitu, wakakakak.... readmore ya

Denim Template dan Simple Template
=> Dashboard >> Template >> Edit HTML >> Pastekan code yang aku blockquote (yang banyak) ini DIATAS code 
/*Header
Blogskins
=> Dashboard >> Template >> Pastekan kode yang aku blockquote (yang banyak) ini DIATAS kode:
</style>
Kode yang aku blockquote adalah dibawah ini:
img{ -webkit-animation-name: none; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; border-radius: 10px;-webkit-transition: 1.0s; -moz-transition: 1.0s } img:hover{ -webkit-user-select:text; -moz-user-select:text; -webkit-animation-name: shake; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-transition: 1.0s; -moz-transition: 1.0s; border-radius: 20px; color:#555; } @-moz-keyframes shake /* Firefox*/ { { -ms-transform:: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } } @-ms-keyframes shake /* IE9*/ { 10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); } 20% { -ms-transform: translate(-3px, 0px) rotate(1deg); } 30% { -ms-transform: translate(0px, 2px) rotate(0deg); } 40% { -ms-transform: translate(1px, -1px) rotate(1deg); } 50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -ms-transform: translate(-3px, 1px) rotate(0deg); } 70% { -ms-transform: translate(2px, 1px) rotate(-1deg); } 80% { -ms-transform: translate(-1px, -1px) rotate(1deg); } 90% { -ms-transform: translate(2px, 2px) rotate(0deg); } 100% { -ms-transform: translate(1px, -2px) rotate(-1deg); } } @-webkit-keyframes shake /* Safari and Chrome */ { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } }
Jangan lupa disimpan ya :)
Oke, thanks for kak Tasya (anastasya-blog.blogspot.co.id)atas informasi/tutorialnya.
Wassalamu'alaikum....

2 komentar:

  1. nggak, nggak sepi kok, blognya kak esa itu selalu ada postingan tiap hari, tapiiii...........

    BalasHapus
  2. hayyooooo, url blogku mana ya ????

    BalasHapus

Komentar yang baik
Jangan berkata kasar