Cara membuat gambar bergerak dengan CSS3

galak mendesig blog atau semacemnyo mongken bae trik ini pacak cubo, sekarang Faiz nak hyubo share tutorial tentang Cara membuat gambar bergerak dengan CSS3 yang agak rumit, tapi tenang bae, trik ini agek Faiz jadike semudah mungkin, sudem ay pake bahasa sehari hari gw , oke lanjuut ke bahasa Indonesia ajj , biar gk puyeng bacanya xd. Jujur ajj , trik ini gw ambil dari blognya kaka Johanes.

http://djogzs.blogspot.com

Bukan bermaksud untuk copas blognya kak Johanes, tapi karena gw sudah baca aturan di blog itu maka saya tidak akan melanggar peraturannya saya mengambil tutorial ini dari blog Johanes,tidak maling tentunya cuman judulnya ajj yang gw ganti,

Sebelum menuju ke tutorial lebih baik backup terlebih dahulu template , gunanya untuk berjaga-jaga apabila ada kesalahan dalam penerapan tutorial ini. Disini ada 2 Style Cloud yaitu awan putih biasa dan yang kedua memakai gambar sendiri,kalo gw sih pake gambar vespa (y), bagi yang ngefans sama naruto mungkin alternatif yang kedua bisa jadi pilihan. kalo mau lihat DEMOnya, lihat ajj di blog gw , ada kok hehehheheh Penerapannya letakkan kode CSS diatas ]]> dan HTML dibawah kode 1. Style Awan Putih CSS HTML 2. Style Pespa CSS HTML Jika misal ada yang error dan template meminta untuk menambahkan kode maka tambahkanlah 5 kode dibawah HTML 

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> 

1. Style Faiz

CSS

#PespaFaiz{position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.PespaFaiz {
width: 200px; height: 138px;
background:url("http://3.bp.blogspot.com/-eFoUpkDVkTA/ULAlpaWbmTI/AAAAAAAAA3A/sZURTijIqo0/s1600/pespa-faiz.png") no-repeat top center;
position: relative;
}
.pespa1 {
-webkit-animation: moveclouds2 15s linear infinite;
-moz-animation: moveclouds2 15s linear infinite;
-o-animation: moveclouds2 15s linear infinite;
}
.pespa2 {
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;
}
.pespa3 {
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;
}
.pespa4 {
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;
}
.pespa5 {
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='PespaFaiz'>
<div class='PespaFaiz pespa1'/><div class='PespaFaiz pespa2'/><div class='PespaFaiz pespa3'/><div class='PespaFaiz pespa4'/><div class='PespaFaiz pespa5'/></div>

Sekian postingan dari gw, bila ada masalah dalam pengerjaannya , bisa tanyakan di komentar , okeeee soB..??

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Irfan Siddik, Published at Friday, November 23, 2012 and have 0 komentar