1. Grass.png
2. Gunung.png
3. Superman.png
Simpan dalam sebuh folder yang anda suka.
Oke tanpa banyak berlama-lama, silahkan buat sebuah file baru di IDE anda, saya sendiri menggunakan notepad++. Tuliskan syntax di bawah ini :
<html>
<head>
<title>Animasi Superman CSS3 - Long Scripts</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="kont">
<div class="obj-kont-1"></div>
<div class="obj-kont-2"></div>
<div class="obj-kont-3"></div>
</div>
</body>
</html>
Simpan file di atas dengan nama index.html pada sebuah folder yang sama dengan file gambar yang sudah anda download.
Selanjutnya, buat file baru lagi untuk file CSSnya. Ketikan syntax berikut ini :
/*=== General === */
.kont {
width: 90%;
height: 233px;
background: #9ac2ff;
margin: 50px auto 50px auto;
position: relative;
overflow: hidden;
}
/*=== Grass ===*/
.obj-kont-1 {
width: 100%;
height: 63px;
background-image: url(grass.png);
background-position:bottom;
background-repeat: repeat-x;
position: absolute;
bottom: 0px;
z-index: 1;
-moz-animation: kont-1 2s infinite linear;
-webkit-animation: kont-1 2s infinite linear;
animation: kont-1 2s infinite linear;
}
@-moz-keyframes kont-1 {
from {background-position: 0 0;}
to {background-position: -190px 0;}
}
@-webkit-keyframes kont-1 {
from {background-position: 0 0;}
to {background-position: -190px 0;}
}
/*=== Mountain ===*/
.obj-kont-2 {
width: 100%;
height: 211px;
background-image: url(gunung.png);
background-position:bottom;
background-repeat: repeat-x;
position: absolute;
top: 20px;
-moz-animation: kont-2 13s infinite linear;
-webkit-animation: kont-2 13s infinite linear;
animation: kont-2 13s infinite linear;
}
@-moz-keyframes kont-2 {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}
@-webkit-keyframes kont-2 {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}
/*=== Super Hero Gak Jelas ===*/
.obj-kont-3 {
width: 150px;
height: 63px;
background: url(superman.png) no-repeat top center;
position: absolute;
top: 35px;
left: 40%;
-moz-animation: kont-3 5s infinite linear;
-webkit-animation: kont-3 5s infinite linear;
}
@-moz-keyframes kont-3 {
0% {top: 20px}
50% {top: 42px;}
100% {top: 20px;}
}
@-webkit-keyframes kont-3 {
0% {top: 20px}
50% {top: 42px;}
100% {top: 20px;}
}
Simpan dengan nama style.css di dalam folder yang sama dengan file index.html nya. Silahkan buka file index.html yang sudah dibuat menggunakan browser anda (TIDAK DIREKOMENDASIKAN MENGGUNAKAN INTERNET EXPLORER)
Sekian tutorial kali ini, semoga bermanfaat, Klik link di bawah ini untuk melihat demo dan download file yang sudah jadi
DEMO DOWNLOAD
Baca juga Clouds Animation Using CSS3
0 komentar:
Post a Comment