NEWS
Loading...
  • Posted by : Johanes Djogan 29 Nov 2010

    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

    { 19 comments... read them below or Comment }

    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

    "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"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -