Kali ini saya akan memposting mengenai CSS Cloud Akatsuki
seperti yang terdapat di header blog ini .saya mendapatkannya dari SUMBER
terpercaya yang sudah ribuan tahun membuat CSS
Tapi sebelum menggunakan trik ini saya ingatkan untuk:
-Membackup terlebih dahulu blog kamu agar tidak terjadi
sesuatu yang diinginkan.
-mengetahui bahwa menggunakan trik ini harus dapat mengatur
posisi awanya sendiri,karena ada kemungkinan saat kamu menggunakan trik
ini,elemen yang dibelakangnya akan tertutupi.
Contoh kemungkinan problem:
-Header tertutup oleh awan ini hingga header tidak bisa
berfungsi untuk diklik.
-Bila kamu menggunakan menubar pada blog kamu maka ada
kemungkinan tertutupi oleh awan ini.
Solusi:
-Gunakan/ganti nilai z-index menjadi lebih
rendah/tinggi(-99999999 s/d 99999999) pada Css #awan1 atau #akatsuki
-Gunakan Margin-top/bottom untuk mengatur posisi.(default
yang saya atur 0px*posisi paling atas*)
Taruh CSS nya di atas kode ]]></b:skin>
Berikut CSS nya:
#akatsuki{position: absolute;z-index: 0;width:100%;margin-top: 0px;height: 0px;}.akatsuki {width: 200px; height: 138px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgYgZQQx0HVE3OS2yC0bsHOBTo4lt5B4vNEqZ6AlfKakVDVTFgptRdTAFi3WCtxW7Ia4hL36bL2NKLOS1wlRw96sOB4YNA5U2e2rPUok1LpwmhE2cSfGeA6A1YGGozTFxlmjVoCJgh_U/s1600/Untitled-1.png") no-repeat top center;position: relative;}
.awanmerah1 {-webkit-animation: moveclouds2 15s linear infinite;-moz-animation: moveclouds2 15s linear infinite;-o-animation: moveclouds2 15s linear infinite;}.awanmerah2 {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;}.awanmerah3 {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;}.awanmerah4 {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;}.awanmerah5 {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;}
}
Lalu Taruh HTML nya di bawah kode <body>
Berikut HTMLnya :
<div id='akatsuki'><div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>
Semoga Bermanfaat !!
Peraturan Sebelum Komentar !!
Jika Anda Follow Blog Saya Saya Akan Follow Back, anda berkomentar saya komentar balik di blog anda , Silahkan Tinggalkan Komentar Dengan Ketentuan :
[+] Blog ini Sudah Disetting menjadi DoFollow jadi Dilarang Spam, Sara, Menghujat Dan Merugikan Orang Lain.
[+] Dilarang Memasang Link Hidup Di Komentar.
[+] Cantumkan Link Sumber Artikel blog ini Jika Ingin Copy Paste.
[+] Gunakan bahasa yang sopan yaa
Terima Kasih Sudah Berkunjung. :D