CSS Cloud Akatsuki Animation

Hai sobat kali ini saya mau sharing CSS,namanya Cloud Akatsuki Animation.tapi untuk trik ini,saya modifikasi sendiri css dan htmlnya.menggunakan CSS3 css pseudo pada background.dan Awan akatsuki diberi background gambar awan akatsuki yang saya buat sendiri,cukup menarik bukan?

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 #akatsuki

-Gunakan Margin-top/bottom untuk mengatur posisi.(default yang saya atur 0px*posisi paling atas*)

Jika ada yang belum mengerti bisa tanyakan pada saya :)

untuk memasang pada blog kamu,pertama buka blogger=>template=>edit HTML

lalu letakan CSS di atas kode ]]></b:skin>

Sedangkan Untuk HTMLnya kamu letakan kodenya di bawah code <body>

Untuk Demo Bsa di liat di Blog Ini Tepatnya di Header

CSS

#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/AVvXsEi-2jA3LliMZYUxmeFweF2SaNRoz69y2aBSouKqxkbjlUczxLJWPHX3BhX3Ds2CE4O4NdZF9590Wo2YInKK4xfS5HML1gLQ5uDG4p5UX8REFkXgErZb2GudiKZpZxN8_OT95Bc0gJ25H8A/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;}
}

HTML

<div id='akatsuki'>
<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>

Selamat mencoba dan semoga bermanfaat.
Oia,bila ada yang mau mengcopas trik ini,saya ingatkan untuk Peraturan blog saya! sertakan sumbernya!!
saya benci dengan PLAGIAT!!!!!! MUST DIEEEEEE!

Backlinks Please Thanks

URL

Code For Forum

HTML Code

<a href='https://shared-bunshin.blogspot.com/2014/04/css-cloud-akatsuki-animation.html' target='_blank'>CSS Cloud Akatsuki Animation</a>

Anda Baru Saja Membaca Artikel Tentang CSS Cloud Akatsuki Animation ,Anda Boleh Menyebarluaskan / Mengcopy Paste Artikel CSS Cloud Akatsuki Animation Ini Bermanfaat Buat Anda , Namun Saya Mohon Untuk Mencantumkan Link CSS Cloud Akatsuki Animation Sebagai SumberNya.

CSS Cloud Akatsuki Animation

Leave a Reply

Label

Ads 125x125

Archieve

Statistik

Followers