Membuat Animasi Cloud (Awan) Dengan CSS3
Membuat Animasi Cloud (Awan) Dengan CSS3
Membuat Animasi Cloud (Awan) Dengan CSS3 - Pada kesempatan kali ini saya akan share sedikit tutorial tentang cara membuat animasi cloud (awan) dengan CSS3. Efek animasi ini sangat menarik dan unik... Selain itu, efek ini juga bisa membuat blog anda menjadi lebih menarik dan lebih bagus lagi dalam segi design tampilannya.
Cara membuatnya cuku simple sekali, kita hanya perlu membuat efek animasinya menggunakan CSS3 dan kemudian kita panggil dengan syntax html biasa. Untuk lebih jelasnya silahkan bisa anda simak tutorial tentang cara membuat animasi cloud (awan) dengan CSS3 berikut ini :
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>.
Script CSS :
#cloud1-ngeposta {position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.cloud1-ngeposta {
width: 200px; height: 60px;
background: #ddd;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud1-ngeposta:before, .cloud1-ngeposta:after {
content: '';
position: absolute;
background: #ddd;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud1-ngeposta:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.gray1 {
-webkit-animation: moveclouds1 15s linear infinite;
-moz-animation: moveclouds1 15s linear infinite;
-o-animation: moveclouds1 15s linear infinite;
}
.gray2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds1 25s linear infinite;
-moz-animation: moveclouds1 25s linear infinite;
-o-animation: moveclouds1 25s linear infinite;
}
.gray3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
.gray4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds1 18s linear infinite;
-moz-animation: moveclouds1 18s linear infinite;
-o-animation: moveclouds1 18s linear infinite;
}
.gray5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
@-webkit-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}Script HTML :
<div id='cloud1-ngeposta'>
<div class='cloud1-ngeposta gray1'></div>
<div class='cloud1-ngeposta gray2'></div>
<div class='cloud1-ngeposta gray3'></div>
<div class='cloud1-ngeposta gray4'></div>
<div class='cloud1-ngeposta gray5'></div>
</div>5. Kemudian klik save/simpan template, selesai dan lihat hasilnya... :)
Note :
Warna dari cloud (awan) tersebut bisa anda sesuaikan sendiri, caranya dengan mengubah/mengganti kode yang saya beri warna hijau (lihat pada script CSS di atas) dengan kode warna pilihan anda. Dan untuk previewnya bisa langsung anda lihat pada halaman postingan ini...
Selamat mencoba dan semoga postingan tentang cara membuat animasi cloud (awan) dengan CSS3 ini bermanfaat. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...
