CSS3 Animasi Percobaan - Virtual DJ

Posted by : Stiker Jalingkut

Pada Postingan Kali,ini saya untuk mempersiapkan percobaan yang bagus CSS3. Saya ingin menciptakan lingkungan tampak bagus dengan banyak unsur bergerak. Sebagai latar belakang, saya memilih DJ konsol musik. Dalam hal demo bergerak hanya dengan CSS3 (tanpa javascript). Saya menggunakan berbagai teknik seperti CSS3 keyframes, animasi, transformasi (rotasi dan skala). Selamat untuk menguji itu. Mungkin Sobat Sudah Pada Tau Semuah Apa Itu

CSS3 Animasi Percobaan - Virtual DJ
Yang Mampuh Mengeluarkan Musik DJ Dalam CSS3 Kalu Sobat Mau Pasang
CSS3 Animasi  - Virtual DJ Silakan Di Lihat Dulu Hasilnya'y Sob

Klik DEMO Kalu Sobat Dah Melihat Hasilnya Jangan
Lupa Nyalakan Son sistem Sobat Yang Keras Biar Pada Tau Semuah Xixixixix..?

Karna Bnyak Yang Bilang Terlalu Banyak CSS Nya Maka Kami Confet Css Nya Biar Sobat 
Tinggal Copy heheh...
Mau Pasang Di Blog Atau Website Sobat Semuah Tinggal Ikutin Langkah2 Di Bawah





Langkah 1. HTML

Semuanya sangat mudah, bukan? Seperti yang Anda lihat - itu berisi banyak gambar Yang Di Atas berbeda Tambah Bingung Heheheh...?
Kalu Sobat Yang Minat Pasang CSS3 Animasi Percobaan - Virtual DJ Silakan  DOWNLOAD Gambar Nya Di Bawah Sobat....
Atau Langsung Di Copy  Semuah Code Yang Di Bawah.. 
Terserah Sobat Mau Di Taroh Di Bagian Manah Tentunya
Di Blog Sobat Hahahahah.. 

<div class="vdj">
          <img src="http://selladrt11.jw.lt/Source Selladrt/back_1.jpg">
          <img class="v1" src="http://selladrt11.jw.lt/Source Selladrt/v1.png">
          <img class="v2" src="http://selladrt11.jw.lt/Source Selladrt/v2.png">
          <img class="v3" src="http://selladrt11.jw.lt/Source Selladrt/v3.png">
          <img class="v4" src="http://selladrt11.jw.lt/Source Selladrt/v4.png">
          <img class="s1" src="http://selladrt11.jw.lt/Source Selladrt/speaker.png">
          <img class="si1" src="http://selladrt11.jw.lt/Source Selladrt/speaker-in.png">
          <img class="s2" src="http://selladrt11.jw.lt/Source Selladrt/speaker.png">
          <img class="si2" src="http://selladrt11.jw.lt/Source Selladrt/speaker-in.png">
          <img class="s3" src="http://selladrt11.jw.lt/Source Selladrt/speaker.png">
          <img class="si3" src="http://selladrt11.jw.lt/Source Selladrt/speaker-in.png">
          <img class="s4" src="http://selladrt11.jw.lt/Source Selladrt/speaker.png">
          <img class="si4" src="http://selladrt11.jw.lt/Source Selladrt/speaker-in.png">
          <img class="slid1" src="http://selladrt11.jw.lt/Source Selladrt/slid1.png">
          <img class="slid2" src="http://selladrt11.jw.lt/Source Selladrt/slid1.png">
          <img class="b1" src="http://selladrt11.jw.lt/Source Selladrt/but1.png">
          <img class="b2" src="http://selladrt11.jw.lt/Source Selladrt/but2.png">
          <img class="b3" src="http://selladrt11.jw.lt/Source Selladrt/but3.png.png">
          <img class="b4" src="http://selladrt11.jw.lt/Source Selladrt/but1.png">
          <img class="b5" src="http://selladrt11.jw.lt/Source Selladrt/but2.png">
          <img class="b6" src="http://selladrt11.jw.lt/Source Selladrt/but3.png.png">

          <img class="eq" src="http://selladrt11.jw.lt/Source Selladrt/space.gif">
          <img class="eq2" src="http://selladrt11.jw.lt/Source Selladrt/space.gif">
        </div>
    <script>
        (function(){
            var sound = new Audio('http://mp3selladrt.faa.im/files/loop.wav');
            sound.volume = 0.9;
            sound.addEventListener('ended', function() { // loop sound
                this.currentTime = 0.1;
                this.play();
            }, false);
            sound.play();
        })();
        </script>

 Langkah 2. CSS
Sekarang, waktunya untuk gaya demo musik kami. Jangan lupa untuk menyertakan file CSS di bagian kepala halaman hasil.
css / main.css Oke Sobat.   Silakan Download Css Main Menu nya Di Bawah Soba

DOWNLOAD 
  
Langkah 3. CSS 
Kalu Sobat Sudah Download Css Nya Sobat Tinggal Taroh 
Bagian Linik Yang Berada Di Bawah Sobat.
Ganti Tulusan Warna Biru.Di Ganti Dengan Css Yang Baru Di Download

 <link href="main.css" rel="stylesheet" type="text/css" />

Saya berpikir bahwa segala sesuatu harus sangat mudah bagi Anda. Saya menggunakan-moz dan-webkit prefiks untuk mengajarkannya bekerja di FF dan browser berbasis WebKit (Safari dan Chrome).

Sekian Dulu Dariku Sobat Semoga Berguna Buat Yang Membutuhkannya Amin...?




{ 29 comentários... read them below or Comment }

  1. Luhur Fatah24 November 2012 pukul 05.07

    keren..nih..

    BalasHapus
  2. vlog media news24 November 2012 pukul 06.54

    Oke genk ntar ta coba... Ijin copy dulu sama download ya

    BalasHapus
  3. vlog media news24 November 2012 pukul 06.55

    Oke genk ntar ta coba... Ijin copy dulu sama download ya

    BalasHapus
  4. Sigli Cyber24 November 2012 pukul 06.59

    sya tes dulu

    BalasHapus
    Balasan
    1. Stiker Jalingkut24 November 2012 pukul 07.23

      silakan genk. klu berminat trimakasih kunjungannya genk

      Hapus
  5. seno24 November 2012 pukul 09.35

    pelajari dulu sob

    BalasHapus
  6. Jane Doe24 November 2012 pukul 10.03

    keren sob buat eksperimennya, tapi maaf fungsinya apa dong?

    BalasHapus
    Balasan
    1. Stiker Jalingkut24 November 2012 pukul 10.21

      mlm genk. fungsinya dengerin musik buat pengunjung heheh..trmakasih genk dah berkunjung.

      Hapus
  7. AZLA24 November 2012 pukul 10.18

    ijin mempelajari ya sob, soalnya aku masih awam sobat
    terimam kasih illmunya

    BalasHapus
    Balasan
    1. Stiker Jalingkut24 November 2012 pukul 10.24

      met mlm genk. silakan heheh.. sama2 awam genk. jdi sma2 belajar hehehh>?

      Hapus
  8. Unknown24 November 2012 pukul 11.01

    haduhh nyimak aja deh.. ;)

    BalasHapus
    Balasan
    1. Stiker Jalingkut24 November 2012 pukul 19.09

      met siang genk. bole heheh. trmakasih bnyk genk kunjungannya

      Hapus
  9. Bagus Sugiarto24 November 2012 pukul 13.54

    sip genk sedang uji coba. Selamat pagi,..

    BalasHapus
    Balasan
    1. Stiker Jalingkut24 November 2012 pukul 19.12

      pgi uga genk. trmakasih kunjungannya genk. kunjungan anda sangat berarti buat blok kami,ini genk.

      Hapus
  10. Arra Pena24 November 2012 pukul 15.57

    Nice Inpohh...

    BalasHapus
  11. Reksi Wiranata24 November 2012 pukul 19.26

    Kunjungn balik,,
    makin menteeepp aje nie blog ??
    hehehe

    BalasHapus
    Balasan
    1. Stiker Jalingkut24 November 2012 pukul 19.53

      trmakasih knjungan baliknya genk'y. salam sukses selalu buat sobat'y.

      Hapus
  12. Unknown25 November 2012 pukul 11.42

    Terima kasih genk, ijin nyimak saja. Oh ia sob...blog sobat jika dibuka pada komputer yg memakai anti virus avast dan avast internet security kedetect virus sobat pada beberapa HTML Java Scrip....segera di cek sob...Terima kasih

    BalasHapus
  13. Unknown28 November 2012 pukul 10.07

    Ijin nyimak sama Ctrl + D.
    follow blog saya ya nanti saya FollowBack

    ==> <a href="http://romantis-xp.blogspot.com/2012/11/adobe-photoshop-cs5-portable.html" rel='dofollow>ROMANTIS-XP.BLOGSPOT.COM</a>

    BalasHapus
  14. Stiker Jalingkut28 November 2012 pukul 18.33

    ok'e sob tnang'j'y heheh

    BalasHapus
  15. Unknown29 November 2012 pukul 05.16

    Kunjungan Balik Sobat...Follow sukses.. Wawa..css nya mantep ini sob. ijin nyoba dulu yea..

    BalasHapus

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

Diberdayakan oleh Blogger.
►

- Copyright © TUTORIAL™ - Blogger Templates - Powered by Blogger - Designed by Sella -