Sedikit Info Seputar
Basic Pembuatan Animasi Awan dengan CSS3
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Basic Pembuatan Animasi Awan dengan CSS3, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel Basic,
Artikel CSS,
Artikel Tips & Trik, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Basic Pembuatan Animasi Awan dengan CSS3
Terbaru
link: Basic Pembuatan Animasi Awan dengan CSS3
Berbagi Basic Pembuatan Animasi Awan dengan CSS3 Terbaru dan Terlengkap 2017
Pada kesempatan kali ini saya ingin berbagi sedikit source code CSS3 Animasi untuk Pemula/Basic, berbeda dengan postingan sebelumnya yaitu tentang "Struktur Dasar HTML5" & "Ektensi Google Chrome Penting Untuk Blogger" yang membahas tentang SEO dan Web Desain Tips & Trik . Dalam postingan ini saya ingin memberitahukan Basic pembuatan Animasi Awan bergerak dengan menggunakan CSS3 Keyframe, dan untuk sahabat yang mulai penasaran silahkan lihat demonstrasi nya di bawah ini :
Cara Pembuatan
Langkah-1 (Membuat kode CSS)Perhatikan kode CSS3 di bawah ini khusus nya pada kode warna
#C0DEED dan alamat Background https://abs.twimg.com/images/themes/theme1/bg.png jika sobat ingin merubah desain/gambar awan nya suatu saat nanti, nah disini saya menggunakan gambar/background default dari situs Twitter.com dalam membuat Demo Cara Membuat Animasi Awan ini, berikut kode CSS-nya : #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;
};
}
Keterangan :
- Untuk mengatur kecepatan silahkan rubah semua value/nilai
10spada kode CSS3 di atas.
Langkah-2 / Terakhir (Memanggil Kode CSS)
Dilanjut dengan Pemasangan kode HTML untuk Memanggil Code CSS3 Animation yang sudah kita buat sebelumnya. Berikut Markup HTML-nya :
<div id="awan">
.. Isi Konten di Dalam Animasi Awan! ..
</div>Coba Langsung yuk? Klik Disini
Sekian tutorial tentang Basic Pembuatan Animasi Awan dengan CSS3, semoga bermanfaat untuk para sobat blogger yang ingin mencoba belajar CSS3 Animasi ini.