Kang Rian
4
Kang Rian
3/09/2014 09:07:00 PM
Basic Pembuatan Animasi Awan dengan CSS3
Basic Pembuatan Animasi Awan dengan CSS3
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.
Kang Rian Ikuti
Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.
Cek. Jasa-Design.web.id
Kerangka Dasar Template Blogger HTML5 & SCHEMA
Alhamdulillah, masih di beri waktu buat ngetik dan berbagi pengetahuan dasar seputar “Pembuatan Template Blogger” .. Pada kesempatan kali in...
![Merapihkan kode CSS dengan CSS Beautifier [ Tools ] - Alhamdulillah, bisa sharing lagi nih.. kali ini saya ingin berbagi tools untuk sobat yang belum sempat Merapihkan Code CSS nya, Langsung sa...](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQIDA8jFsTVHUqUHD-4HRS8IIOzX0yhf-JSZb-k7_byuP1MbfhCkRFWaM14VdeeImHsASgzne9CRw-XlmEGGmp6DM0U7XsoJJfkcNnE3oReXSCSyxMV-Jo7_-HhwauOtnm6LFlw5KT_uV/w800-h400-p-k-no-nu/css-beautifier-icon-png-KangRian%5Bdot%5Dcom.png){kind=icon}
Merapihkan kode CSS dengan CSS Beautifier [ Tools ]
Alhamdulillah, bisa sharing lagi nih.. kali ini saya ingin berbagi tools untuk sobat yang belum sempat Merapihkan Code CSS nya, Langsung sa...
Cara Memasang Tooltip Responsive di Blog dengan jQuery.
Haloo.. udah pada bangun sob?, setelah beberapa hari kemarin ane share template Pertamax - Free Responsive Blogger Template nah pagi ini s...
Keren Kang, bisa buat bikin game plaffy bird nich:)
BalasHapuswkwkw.. iya kang memang, silahkan kalo mau coba-coba kang bener kreatif tuh kalo bisa main game plaffy bird di web browser :D
HapusSudah ada yang buat Kang he...
Hapuspendekar css 3 :sup2
BalasHapusbukan om , ane cuman kuncung . :ngakak
Hapusoooh pendekar kuncung cap css 3 donk om klo gt :thumbup
Hapusahaha pendekar ternyata ada cap nya juga yah sob! :ngakak
Hapuscieee...dapt tips baru nih :) izin praktek gan :)
BalasHapuswoke sob, monggo! semoga bermanfaat . :)
Hapusok zip...
Hapuswoke sob! :thumbup
Hapuskeren gan animasi awannya... blog jadi keliatan lebih atraktif.. :)
BalasHapushehe betul kang, silahkan di coba! :) , semoga berhasil .
HapusMet pagi Kang mamapir lagi nih, seperti biasa mau minta kopi hitam he...
BalasHapussalam kenal sob, saya mw jg dong kopinya :thumbup
HapusWuihh, pecinta kopi ternyata lagi pada disini .. waduh ada tamu nih , monggo kang . ayo kita ngopi dulu :D
Hapus[img]http://i.imgur.com/pkJ8YZy.png[/img]
Silahkan diminum kang, baru mateng nih kopi nya ! :thumbup
Kopi mana kopi mana ... INGAT black coffee yeah
Hapusitu ada sm Kang Rian kopinya sob, cm 1 gelas doang suruh sruput bareng2 katanya
Hapuskeren kangg ,,, hehehe met rehat aja ,,lanjut :2thumbup
BalasHapusoke kang makasih .. :D
HapusMasuk blog ini serasa ngunjungin platform wordpress, salam kenal gan :shakehand
BalasHapusterima kasih sudah mampir gan, salam kenal juga . :) ..
Hapusmampir dulu ah..
BalasHapusKeren kang animasinya :2thumbup jadi terasa terbang di atas awan hahaha
nice share kang :thumbup
haha iya nih kang , bener serasa terbang melayang ! hehe :ngakak
HapusAsal jangan awan kelabu saja heuheuy deudeuh
Hapuswkwkwk.. nyindir nih kang rully!! :(
Hapusmantap gan :genit
BalasHapusthanks gan! :shakehand
HapusHangat banget tutorialnya kali ini,
BalasHapusmantab :thumbup
bisa exchange ga disini yahh...? :cool
bisa sob! :D dimari > [button]https://rian-nurherdian.blogspot.com/p/tukar-link-link-exchange.html[/button]
Hapusnah ini yang saya cari dr dl hehe....simpan dl, hatur nuhun
BalasHapussami-sami mba kiki :D
HapusWkwk.. keren banget kang rian.. baru liat animasi kayak begitu heheh..
BalasHapusbtw, saya juga punya nih tutorial animasi dasar yang mungkin bisa jadi tambahan buat posting ini :D
Tutorial Animasi CSS3
nice artike,,, makasih bayajk buat infonya gan,, sangat bermanfaat..
BalasHapushttp://obatherbalampuh.com/
itu animasi buat loading page ato apa kang?
BalasHapussalam kenal :shakehand