Hai sobat kali ini saya mau sharing trik menarik lagi nih,namanya Cloud animasi seperti yang saya pasang diblog saya.tapi untuk trik ini,saya modifikasi sendiri css dan htmlnya menjadi 2 versi,yang pertama awan'a berwarna putih menggunakan CSS3 css pseudo pada background.dan yang kedua awan akatsuki yang hanya 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 Css #awan1 atau #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>
1. Awan putih
CSS
#awan1 {position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.awan1 {
width: 200px; height: 60px;
background: #ffffff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.awan1:before, .awan1:after {
content: '';
position: absolute;
background: #ffffff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.awan1:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.putih1 {
-webkit-animation: moveclouds1 15s linear infinite;
-moz-animation: moveclouds1 15s linear infinite;
-o-animation: moveclouds1 15s linear infinite;
}
.putih2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds1 25s linear infinite;
-moz-animation: moveclouds1 25s linear infinite;
-o-animation: moveclouds1 25s linear infinite;
}
.putih3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
.putih4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds1 18s linear infinite;
-moz-animation: moveclouds1 18s linear infinite;
-o-animation: moveclouds1 18s linear infinite;
}
.putih5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
@-webkit-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
HTML
<div id='awan1'>
<div class='awan1 putih1'/>
<div class='awan1 putih2'/>
<div class='awan1 putih3'/>
<div class='awan1 putih4'/>
<div class='awan1 putih5'/></div>
2. Awan Akatsuki
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/AVvXsEhWTxZ8ZmDLlSOGlUyy20eF5RSXXRv70zKWD9w3WLv9tX3V76AKIpZ5nF6tp3distSRFemEBOcqCdcmr1WB93CjKibqF3ZgLmWieVAdQkB5MN4LLeOtM31L1-uOfrOj6YRUZVWCD2cJWCM/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!
baca Kebijakan disini... thx
Ditulis Oleh : Unknown ~ KRJ_Team
Anda sedang membaca sebuah artikel yang berjudul Cloud Animasi dengan CSS3, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan tulis di kotak komentar
0 komentar "Cloud Animasi dengan CSS3", Baca atau Masukkan Komentar
Posting Komentar
~~ KOMENTAR HARUS ~~
1. SOPAN
2. BIJAK
3. MASUK AKAL
4. GAK BOLEH KOMENTAR SAMPAH CONTOHNYA . PERTAMAXX !!!
Ty..