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. Customisasi Tampilan Tag Cloud
  2. Menggulingkan Top Komentator
  3. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  4. Free CSS Button Generator
  5. Membuat Text Gradient Dengan CSS
  6. Yesterday, The Beatles
  7. Membuat Menu Navigasi Dengan CSS3
  8. CSS3 Animation, Zoom In Zoom Out, Rotation
  9. Cara Mengganti Background Theme WordPress
  10. Source Code Main Remi Bersama Top Komentator
  1. 24-10-2010 at 18:45 | #1

    emang sonic hobi main bola ya kang?he3

    Reply

    Alwi Reply:

    Heee … iseng aja …. tiba2 pingin bikin sonic ngejar bola …

    Reply

  2. 26-10-2010 at 16:48 | #2

    css3 ama html5 emank bikin dunia web lebih seger… :D

    Reply

  3. 27-10-2010 at 07:31 | #3

    keren sob
    makasih ya

    Reply

  4. 30-10-2010 at 09:44 | #4

    kirain bolanya juga ikut lari..hehe
    tapi bagus..

    Reply

    Alwi Reply:

    Untuk melihat efek animasinya harus menggunakan browser/peramban berbasis webkit seperti Google Chrome/Safari terbaru

    Reply

  5. 10-11-2010 at 10:27 | #5

    harus pakai chrome atau safari ya

    Reply

  6. 11-11-2010 at 23:29 | #6

    Kalau dibuat agak lambat bisa kan mas? Itu kecepeten je.

    Reply

    Alwi Reply:

    Bisa Kang, tinggal diganti angkanya di pengaturan transition-nya menjadi 4s, 5s dan seterusnya sesuai selera.

    Reply

  7. 12-11-2010 at 00:23 | #7

    Laen kali mungkin bisa dicoba supaya larinya bola sebarang mas.

    Reply

    Alwi Reply:

    Bisa Kang, dibuat muter jumpalitan juga bisa …

    Reply

    Guru Go!Blog Reply:

    Kalau memang bisa, mungkin sekalian dibuat dalam bentuk flash, lalu di zip untuk di sedot buat game anyakku akan lebih bagus lho mas. (Ijik ngeyel ndotndoten) :lol:

    Reply

  8. 7-4-2014 at 12:30 | #8

    wah bagus nih, semakin menarik saja pembahasan css ini

    Reply

  9. 16-4-2014 at 19:00 | #9

    wah bikin semangat nih info yang bagus

    Reply

Comment pages
1+6=? (Wajib diisi)