Cara Pembuatan Animasi Awan Di Blog

Unknown

Animasi, CSS3

Rabu, 16 April 2014

Belum ada komentar

Basic Pembuatan Animasi Awan Dengan CSS3 - Apa kabar sobat maman semuanya mudahan sehat wal afiat aja ya . Sebelumnya kang maman sudah membagikan tutorial Membuat Halaman Demo Dengan Tollbar Di Blogspot dan pada kesempatan kali ini kang maman kembali membagikan tutorial yaitu Cara Pembuatan Animasi Awan Di Blog . Dalam hal ini kang maman akan menggunakan coding CSS3 yang sangat ramah terhadap blog dan search engine .

Bagaimana sih animasi awan yang dimaksud ? nah coba lihat contoh dibawah ini :

Contoh Animasi Awan Di Blog

Cara Pembuatan Animasi Awan

Copy dan paste code dibawah ini tepat diatas code ]]></b:skins> atau </style>

#awan {
background-color:#C0DEED;
background: url(https://abs.twimg.com/images/themes/theme1/bg.png) center top repeat-x;
padding-top:100px;
padding-bottom:10px;
  width: 100%;
  height: 135px;
  animation: awan-animasi 10s linear infinite;
  -ms-animation: awan-animasi 10s linear infinite;
  -moz-animation: awan-animasi 10s linear infinite;
  -webkit-animation: awan-animasi 10s linear infinite;
}

@keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-webkit-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-ms-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-moz-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
} 

Perhatikan code diatas :
1. Pada code https://abs.twimg.com/images/themes/theme1/bg.png adalah code gambar background yang akan menjadi animasi nantinya , disitu saya memakai gambar asli dari twitter dan bisa anda ganti sesuka hati .
2. Pada code #C0DEED ini adalah code background / warna latar belakang pada animasi tersebut .
3. Dan pada code 10s adalah kecepatan awan itu bergerak .

Cara Pemakaian

Cara memanggil awan tersebut letakkan code dibawah ini dimana sobat ingin memunculkan animasi awan tersebut .

<div id="awan">

.. Isi Konten di Dalam Animasi Awan! ..

</div> 

Mungkin hanya itu saja yang bisa kang maman bagikan hari ini , semoga bermanfaat buat sobat blogger semuanya .

Resource : http://blog.kangrian.com/2014/03/basic-pembuatan-animasi-awan-dengan-css3.html