Membuat Animasi Cloud (Awan) Dengan CSS3 (Part 2) - Pada kesempatan yang lalu saya telah menyinggung dan memberikan sedikit tutorial tentang cara membuat animasi cloud (awan) dengan CSS3, namun pada tutorial tersebut awan yang di buat adalah awan biasa (hanya dengan variasi warna saja). Nahh, pada kesempatan kali ini saya akan share tentang cara membuat animasi cloud (awan) dengan CSS3 yang menggunakan gambar sebagai bahan untuk di jadikan awan tersebut.
Gambar yang akan saya gunakan adalah gambar awan akatsuki (maklum saya naruto lovers :-D), dan berikut langkah-langkah / tutorial cara membuat animasi cloud (awan) dengan CSS3 (Part 2). Silahkan bisa anda simak dengan baik!
1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".
3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".
4. Kemudian letakkan script CSS berikut di atas kode
]]></b:skin> dan script HTML berikut di bawah kode <body>. (sama seperti tutorial pada postingan sebelumnya)Script CSS :
#akatsuki-cloud {position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.akatsuki-cloud {
width: 200px; height: 138px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAwkIKIZYWIBk2c0q-TrclWkcdYTvIz2IPyhgyk6Gbf93jSomK3hGxqMbCl93n1DvACJEMTWlL_7QHjPp3KZqETxiM0Vy36tTaCG4GscdBWuIWHhzblUfgQ_NIrqiE_0W526uLCBz5HMo/s1600/cloud-akatsuki-ngeposta.png") no-repeat top center;
position: relative;
}
.ngeposta-cloud1 {
-webkit-animation: moveclouds2 15s linear infinite;
-moz-animation: moveclouds2 15s linear infinite;
-o-animation: moveclouds2 15s linear infinite;
}
.ngeposta-cloud2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds2 25s linear infinite;
-moz-animation: moveclouds2 25s linear infinite;
-o-animation: moveclouds2 25s linear infinite;
}
.ngeposta-cloud3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
.ngeposta-cloud4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds2 18s linear infinite;
-moz-animation: moveclouds2 18s linear infinite;
-o-animation: moveclouds2 18s linear infinite;
}
.ngeposta-cloud5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
@-webkit-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}Script HTML :
<div id='akatsuki-cloud'>
<div class='akatsuki-cloud ngeposta-cloud1'></div>
<div class='akatsuki-cloud ngeposta-cloud2'></div>
<div class='akatsuki-cloud ngeposta-cloud3'></div>
<div class='akatsuki-cloud ngeposta-cloud4'></div>
<div class='akatsuki-cloud ngeposta-cloud5'></div>
</div>Note :
Kode yang saya beri warna hijau adalah alamat url gambar yang akan di gunakan sebagai awan, anda bisa menggantinya dengan alamat url gambar pilihan anda sendiri. Dan untuk previewnya bisa langsung anda lihat pada halaman postingan ini.
Selamat mencoba! Semoga postingan tentang cara membuat animasi cloud (awan) dengan CSS3 (Part 2) ini bisa bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yanag ada, salam sejahtera by ngeposta...
0 comments:
Post a Comment