Kali ini saya akan memposting mengenai CSS Cloud Akatsuki seperti yang terdapat di header blog ini .saya mendapatkannya dari SUMBERterpercaya 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/AVvXsEjzIJDvUuXgVUHj8cgpKiLiycKanDUD1JFabGMUDers5pYaJuF2D-d1Eq2dMcrVxDz3XECQAnKfIwJgJKeYYAaJoqn-M5Nd1nKBnSC5ckkc3g6lnPLDUr4Z7KJk-T7jAaBQMA5xBScFwBY/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 !!Sumber : Blog Johanes
