Animasi Sharingan Dengan CSS3

Animasi Sharingan Dengan CSS3

hai sobat,kali ini saya mau share cara membuat animasi sharingan hasil experimen sendiri nih n_n
silakan sobat coba2 buat iseng2.tapi trik css3 animation ini,hanya akan terlihat di browser tertentu seperti google chorme
.untuk mozilla firefox belum dapat mendukung animasi ini  .bila sobat mau lihat contoh'a,bisa dilihat Disini
ini dia trik'a


Pertama,masukan CSS ini di template sobat


.Sharinganmadara {
background: url(http://2.bp.blogspot.com/_BnQGKEnfHss/SthsOiM1xmI/AAAAAAAAAAU/J7kM6fsIPik/s320/300px-Mangekyou_Sharingan_Madara.svg.png) no-repeat;
height: 300px; line-height: 46px;
width: 300px;
-webkit-transition: all 2s ease-in-out;
}

.Sharinganmadara:hover {
-webkit-transform: rotate(900deg);
}
Url gambar bisa sobat ganti dengan gambar sobat

lalu masukan kode HTML ini di blog soba/elemen halaman.

<div class="Sharinganmadara">
</div>


selesai deh...
selamat mencoba,semoga bermanfaat,dan jangan lupa tinggalkan komentar'a n_n

Komentar

  1. hhe, . . . kren kk , aq ganti tuh yg url sharingan jadi rinegan , jadi muter" , aq liat nya jadi pusing @.@

    BalasHapus
  2. Pertamax bang Joh....

    Seperti biasa... tutorial yang menarik...

    Tapi mungkin belum terlalu berguna untuk diterapkan di blog/website...

    karena hampir semua browser belum mendukung animasi CSS3...
    Thx 4 share...
    CMIIW

    :kekeke;

    BalasHapus
  3. Pertamax abis gan n_n
    weww,bro hati2 kalau komen =.="

    BalasHapus
  4. Apus aja sih... gitu aja repot... =o=
    Liat blog gw...

    BalasHapus
  5. hm.. kk jo, itu yang animasinya emang ga muter ya?

    btw, sharingannya bagus..

    BalasHapus
  6. muter kq..tapi musti pake googe chrome bro.kalau pake mozilla.animasi'a ga kliatan

    BalasHapus
  7. manthap gan,..
    saya tunggu artikel menarik lainnya dari blog anda

    BalasHapus
  8. jo kok gk bsa ya ?
    ngopiin link yang kedua nya di elemen kan ?

    BalasHapus
  9. bukan bro..
    kalo css'a taro di template

    kalo kode html'a di elemen halaman

    BalasHapus
  10. wahh...
    menarik nih sob...
    mungkin bisa ane tes..

    BalasHapus
  11. Wah keren nih, makasih sob artikelnya.

    BalasHapus
  12. keren yaaa... tpi syg gk bisa tampil di browser firefox

    BalasHapus
  13. Wah Bisa Sering kesini...Buat Belajar Modif Blog ...Mantap gan

    BalasHapus
  14. Gi mana caranya untuk memasukkan kode HTML ke dalam elemen halaman?

    BalasHapus
  15. Gan,, kode yang

    .Sharinganmadara {
    background: url(http://2.bp.blogspot.com/_BnQGKEnfHss/SthsOiM1xmI/AAAAAAAAAAU/J7kM6fsIPik/s320/300px-Mangekyou_Sharingan_Madara.svg.png) no-repeat;
    height: 300px; line-height: 46px;
    width: 300px;
    -webkit-transition: all 2s ease-in-out;
    }

    .Sharinganmadara:hover {
    -webkit-transform: rotate(900deg);
    }

    sertakan Sumbernya bila anda mau mengcopy paste artikel ini. Animasi Sharingan Dengan CSS3 http://djogzs.blogspot.com/#ixzz1zoIKo5FN
    Under Creative Commons License: Attribution

    Masangnya Gimana?
    Mohon Jawab

    BalasHapus

Posting Komentar

"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

"Sorry your comment will not be replied, because this blog has been inactive. Thank you"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template