Assalamualaikum wr.wb
oke bertemu lagi dengan saya kali ini saya akan mensharing tutorial membuat animasi mobil.
B. Latar belakang
animasi itu sebagai hiasan untuk pembuatan web biar menarik untuk di pandang
C. Maksud dan tujuan
ingin mengetahui cara pembuatan animasi mobil berjalan
D. waktu pelaksanaan
12 jam
E. Pembahasan
caranya itu ikuti langkah-langkahnya
1. download dulu image nya ini contoh image ku
2. caranya buat file format html , ini codenya
<!doctype html>
<html>
<head>
<title>animasi mobil berjalan</title>
<style>
img {
margin-top: 30%;
}
body {
background-image: url("bisa.svg");
background-size: 60%;
}
#mobil {
position:absolute;
-webkit-animation: mlaku 5s; /* Chrome, Safari, Opera */
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation: mlaku 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mlaku {
from {left: 0px;}
to {left:567;}
}
/* Standard syntax */
@keyframes mlaku {
from {left: 0px;}
to {left:567px;}
}
.link-MULAI {
text-decoration: none;
color: purple;
padding: 2px 6px 2px 6px;
border: 1px solid #DC143C;
border-radius:2px;
}
</style>
</head>
<body>
<div class="img1"></div>
<img src="mobil.gif" width="300" id="mobil" >
<a href="file:///home/mintupi/Documents/mobil.html" class="link-MULAI">MULAI</a>
</body>
</html>
<html>
<head>
<title>animasi mobil berjalan</title>
<style>
img {
margin-top: 30%;
}
body {
background-image: url("bisa.svg");
background-size: 60%;
}
#mobil {
position:absolute;
-webkit-animation: mlaku 5s; /* Chrome, Safari, Opera */
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation: mlaku 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mlaku {
from {left: 0px;}
to {left:567;}
}
/* Standard syntax */
@keyframes mlaku {
from {left: 0px;}
to {left:567px;}
}
.link-MULAI {
text-decoration: none;
color: purple;
padding: 2px 6px 2px 6px;
border: 1px solid #DC143C;
border-radius:2px;
}
</style>
</head>
<body>
<div class="img1"></div>
<img src="mobil.gif" width="300" id="mobil" >
<a href="file:///home/mintupi/Documents/mobil.html" class="link-MULAI">MULAI</a>
</body>
</html>
3. lalu klik open in browser, ini jadinya
1.laptop
2.aplikasi inkscape
3. charger
G. Referensi
Maaf gambarnya mobil dari google
H. Penutup
oke sekian dari saya bila ada kesalahan saya minta maaf , Semoga bermanfaat .
Wassalamualaikum wr.wb
0 Comments
silahkan berkomentar tentang template ini