Kali ini Saya akan memposting CSS editan saya setelah sebelumnya saya memposting CSS Animasi Akatsuki Cloud kali ini saya akan memposting CSS Deidara Bird.
Tapi sekali lagi saya ingatkan 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("http://i1326.photobucket.com/albums/u658/rezadermawan31/asu_zps620cb61e.png") no-repeat top center;position: relative;}
.deidara1 {-webkit-animation: movebirds2 15s linear infinite;-moz-animation: movebirds2 15s linear infinite;-o-animation: movebirds2 15s linear infinite;}.deidara2 {left: 200px;-webkit-transform: scale(0.6);-moz-transform: scale(0.6);transform: scale(0.6);opacity: 0.6;-webkit-animation: movebirds2 25s linear infinite;-moz-animation: movebirds2 25s linear infinite;-o-animation: movebirds2 25s linear infinite;}.deidara3 {left: -250px; top: -200px;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);transform: scale(0.8);opacity: 0.8;-webkit-animation: movebirds2 20s linear infinite;-moz-animation: movebirds2 20s linear infinite;-o-animation: movebirds2 20s linear infinite;}.deidara4 {left: 470px; top: -250px;-webkit-transform: scale(0.75);-moz-transform: scale(0.75);transform: scale(0.75);opacity: 0.75;-webkit-animation: movebirds2 18s linear infinite;-moz-animation: movebirds2 18s linear infinite;-o-animation: movebirds2 18s linear infinite;}.deidara5 {left: -150px; top: -150px;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);transform: scale(0.8);opacity: 0.8;-webkit-animation: movebirds2 20s linear infinite;-moz-animation: movebirds2 20s linear infinite;-o-animation: movebirds2 20s linear infinite;}@-webkit-keyframes movebirds2 {0% {margin-left: 1000px;}100% {margin-left: -1000px;}}@-moz-keyframes movebirds2 {0% {margin-left: 1000px;}100% {margin-left: -1000px;}}@-o-keyframes movebirds2 {0% {margin-left: 1000px;}100% {margin-left: -1000px;}}
Lalu Taruh Kode HTML nya di bawah kode <body>
Berikut HTML nya :
<div id='akatsuki'><div class='akatsuki deidara1'/><div class='akatsuki deidara2'/><div class='akatsuki deidara3'/><div class='akatsuki deidara4'/><div class='akatsuki deidara5'/></div>
Kalo Mau Lihat Contohnya Dibawah Ini
DEMO
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