Cloud Animasi Dengan CSS3 - Bagi anda yang suka mendesig blog atau semacamnya mungkin trik ini bisa anda coba, disini saya akan coba share tutorial tentang Animasi CSS3 yang agak rumit namun saya coba ulas dengan semudah mungkin, jika sebelumnya kita sudah bahas tentang basic dari blogger misal tentang Cara Membuat Permalink, Read More, Breadcrumbs, dan Related Post maka kita akan beranjak ke yang lebih "WEW" katakanlah, bukan bermaksud untuk copas tapi karena saya sudah baca aturan di blog itu maka saya tidak akan melanggar peraturannya saya mengambil tutorial ini dari blog tetangga tidak maling tentunya judul artikelnyapun saya buat sama dan sobat bisa menemukan tutorial aslinya di http://djogzs.blogspot.com jika sulit untuk memahami tutorial yang saya buat ini.
Sebelum menuju ke tutorial lebih baik backup terlebih dahulu template Anda, gunanya untuk berjaga-jaga apabila ada kesalahan dalam penerapan tutorial ini.
Disini ada 2 Style Cloud yaitu awan putih biasa dan yang kedua awan akatsuki, bagi yang ngefans sama naruto mungkin alternatif yang kedua bisa jadi pilihan. Maaf kalo demonya tidak bagus karena template ini kurang suport.

Penerapannya letakkan kode CSS diatas ]]></b:skin> dan HTML dibawah kode <body>

1. Style 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. Style 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/AVvXsEgoH6i-fhdArNIWGP0bK3Pw40z_iag9vavYlzXNx_udULsyLyIE9o8RyObygY45WZgF45tq8Aiib5wN6Vsle4RObjauUpNe5PW__yZpdKIpYkkiXrJgzbGE5fFRlXbQTz2SbCgx6AbeyT8/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>
Jika misal ada yang error dan template meminta untuk menambahkan kode </div> maka tambahkanlah 5 kode </div> dibawah HTML


Labels:

6 Komentar:

Blogger Sari Battang said on July 12, 2012 at 12:56 PM 

Kepada pemilik blog ini saya bisa minta tolong @muhammad irham

saya bisa minta tolong gk nihh kk... plizzz...???

Blogger Sari Battang said on July 12, 2012 at 1:00 PM 

Bisa minta no Hp km gk ...???

Ada yang aku mau bicara kan ke kk
sebelumnya kenalkan saya sidik...

Tolong plizzzz

Blogger Muhammad Irham said on July 12, 2012 at 2:11 PM 

@Sidik Hackz lewat email aja, atau bisa tanyakan langsung disini.

Blogger Sari Battang said on July 13, 2012 at 12:41 PM 

2 hari gmn kk...??? 20 ribu..?

Blogger Unknown said on July 14, 2012 at 12:42 AM 

Awannya lagi Balapan ..
Asli baru liat, Baguus gan ..!!

Anonymous Jefry said on October 10, 2012 at 1:53 PM 

bagus sekali animasinya, kira2 apa bisa memberatkan loading blog ya ?
trims

Post a Comment

© 2012 - Koderator | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger