Home » CSS » CSS3, Sonic Mengejar Bola

CSS3, Sonic Mengejar Bola

18 Okt. 201072 comments
CSS3, Sonic Mengejar Bola

Dulu sebelum ada CSS3 untuk membuat efek animasi biasanya memerlukan bantuan javascript. Sekarang dengan teknik dan fitur yang ada di CSS3 dan dengan bantuan browser atau peramban yang sudah mendukung WebKit seperti Google Chrome/Safari kita bisa membuat efek animasi baik pada teks, gambar atau video seperti kalau kita menggunakan Power Point, bahkan dengan CSS3 kita juga bisa membuat film kartun atau games.

Mempelajari CSS3 ternyata sangat-sangat mengasikkan, terutama efek animasinya. Namun sayang, belum semua browser atau peramban bisa menampilkan efek-efek animasi tersebut. secara penuh kecuali Google Chrome/Safari terbaru. Untuk Firefox 4 beta dan Opera 10.62 hanya bisa menampilkan beberapa efek animasi saja, (*ngedumel sendiri*) kapan sich semua peramban bisa kompak  dan standard.

Pada kesempatan ini, sedikit berbagi dari hasil mempelajari CSS3 dan sedikit utak-atik, di bawah ini saya tampilkan tips dan triks CSS3 yaitu Sonic mengejar bola.

Demo Sonic Mengejar Bola, silahkan dibuka dengan Google Chrome/Safari terbaru

bola
bola
sonic
sonic

Arahkan mouse ke dalam box (Hover)

Kode CSS-nya :

<style>
#timings_bola {
background:#7DB440 url(http://domainanda.com/img/rumput.png);
-webkit-box-shadow: 5px 5px 5px #818181;
-moz-box-shadow: 5px 5px 5px #818181;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
width:580px;
height:306px;
margin:0 auto;
border:1px #006600;
padding:5px;
}
.bola_1 {
margin-top:200px;
width:100px;
height:100px;
margin-bottom:10px;
}
#gelinding.bola_1 {
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
}
.bola_2 {
margin-top:-110px;
width:100px;
height:100px;
margin-bottom:10px;
}
#gelinding.bola_2 {
-moz-transition: all 3s linear;
-o-transition: all 3s linear;
-webkit-transition: all 3s linear;
transition: all 3s linear;
}
.sonic_1 {margin-top:-70px;margin-left:20px;
width:54px;
height:62px;}
#lari.sonic_1 {
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
-webkit-transition: all 5s linear;
transition: all 5s linear;
}
.sonic_2 {
margin-top:-70px;
margin-left:50px;
width:54px;
height:62px;
}
#lari.sonic_2 {
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
-webkit-transition: all 5s linear;
transition: all 5s linear;
}
#timings_bola:hover .bola_1, #timings_bola.hover_effect .bola_1 {
margin-left:480px;
-webkit-transform: translate(540px,-500px);
-moz-transform: translate(540px,-500px);
-o-transform: translate(540px,-500px);
}
#timings_bola:hover .bola_2, #timings_bola.hover_effect .bola_2 {
margin-left:480px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
#timings_bola:hover .sonic_1, #timings_bola.hover_effect .sonic_1 {
-webkit-transform: translate(940px,-400px);
-moz-transform: translate(940px,-400px);
-o-transform: translate(940px,-400px);}
#timings_bola:hover .sonic_2, #timings_bola.hover_effect .sonic_2 {
margin-left:470px;
margin-left:530px;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
transform: translate(0,0);
}
</style>

Kode HTML-nya :

<h2 align="center">Demo Sonic Mengejar Bola, by Alwi</h2>

<div id="timings_bola">
<div id="gelinding" class="bola_1"><img src="http://domainanda.com/img/bola.png"></div>
<div id="gelinding" class="bola_2"><img src="http://domainanda.com/img/bola.png"></div>
<div id="lari" class="sonic_1"><img src="http://domainanda.com/img/sonic.gif"></div>
<div id="lari" class="sonic_2"><img src="http://domainanda.com/img/sonic.gif"></div>
</div>
<p style="text-align: center; margin-top: 10px;"><strong> Arahkan mouse ke dalam box (Hover)</strong></p>

Keterangan : Ganti yang saya beri warna biru dengan URL gambar anda.

Animasi lainnya akan saya tampilkan di postingan berikutnya, seperti Zoom In Zoom Out, Rotation, Transitions, Cross fading images, Sliding, Flipping dan lain-lain.  Ok !, Selamat berkreasi dan mengeksplorasi kelebihan-kelebihan CSS3.

http://domainanda.com/img/
Mudah-mudahan artikel tentang CSS3, Sonic Mengejar Bola ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  2. Menggulingkan Top Komentator
  3. Yesterday, The Beatles
  4. Custom CSS Per Post
  5. CSS3 Animation, Zoom In Zoom Out, Rotation
  6. Cara Mengganti Font Dalam Postingan
  7. Main Remi Bersama Top Komentator
  8. Cara Mengganti Background Theme WordPress
  9. Cara Menggabungkan File CSS WordPress
  10. Cara Membuat Tampilan Postingan Yang Berbeda-beda
  1. 20-10-2010 at 17:42 | #1

    numpang belajar dari blog ini

    Reply

    Read Online Naruto Reply:

    ayo, kita semua sama-sama belajar

    Reply

  2. 20-10-2010 at 19:53 | #2

    absen bang alwi :D hohohohoho

    Reply

    Read Online Naruto Reply:

    ayo, untung gak terlambat mas

    Reply

  3. 21-10-2010 at 09:42 | #3

    Ini baru tutorial, mantap dan jelas. Terus berkarya Kang, salam kenal

    Reply

  4. 21-10-2010 at 11:07 | #4

    Selamat memulai aktifitas semua, sukses selalu

    Reply

  5. 21-10-2010 at 13:25 | #5

    Wah, sekarang sudah eranya CSS3 dan HTML5, berharap era web 2.0 segera berakhir dan digantikan dengan yang baru

    Reply

    Hybrid car Reply:

    Tapi untuk urusan script jadi harus belajar lagi…

    Reply

  6. 21-10-2010 at 15:07 | #6

    akhirnya keLuar juga animasi nya..
    kreatif…

    Reply

    Muhammad Faisal Aziz Reply:

    iya,kreatif.Bagus lagi,itu bolanya euro 2012 ya?

    Reply

  7. 21-10-2010 at 15:51 | #7

    wew,kreatif.Bagus lagi Gambarnya.Thanks for infonya

    Reply

  8. 21-10-2010 at 19:41 | #8

    wah menarik sekali mas alwi

    Reply

  9. 24-10-2010 at 18:44 | #9

    keren juga yah sonic nya..

    Reply

  10. 24-10-2010 at 18:44 | #10

    gunain software apa mas bwt bikin animasi sonic?

    Reply

    Hybrid car Reply:

    Biasanya pake flash bro…

    Reply

    Alwi Reply:

    Untuk gambar sonic pakai photoshop format gif terus ditambah efek scale dan transform dg CSS3 dan masih bisa juga ditambahkan efek lainnya seperti gerakan akrobatik, guling2 dll dg CSS3 dan webkit

    Reply

Comment pages
3+4=? (Wajib diisi)