CSS ANIMASI DEIDARA BIRD
3/02/2013
By
Agung DeidaraRyu
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 !!
Author
My name is Agung Prastyo. Nineteen my Age. I from Pekanbaru City.
0 komentar:
Syarat Berkomentar :
-Coment yang sopan !!
-Tidak mengandung kata2 Negatif.
-Dilarang Menghina dll.
Salam DND Ryujinki (^_\ \