Pada tutorial kali ini kita akan belajar membuat animasi gerhana matahari menggunakan css. Oke langsung saja ke tutorialnya.
1). Langkah pertama adalah buat rangka htmlnya terlebih dahulu atau kalian bisa menggunakan aplikasi yang otomatis membuatkan rangka html contohnya yaitu webmaster.
2). Langkah selanjutnya adalah menambahkan css pada html. Caranya yaitu tambahkan tag <style> & </style> pada html dan letakkan setelah tag <head> atau sebelum tag </head>. Setelah itu tambahkan script dibawah ini lalu letakkan didalam tag <style> & </style>.
*/Author By Nadhif Fernanda Z. a.k.a. Gator Bks*/
* {
box-sizing: border-box;
}
body {
background: #2f3640;
overflow: hidden;
}
#star {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 250px;
margin-left: -125px;
margin-top: -125px;
border-radius: 50%;
background: #fbc531;
box-shadow: 0 0 50px #e1b12c;
}
#planet {
position: absolute;
left: 0px;
top: 0px;
width: 250px;
height: 250px;
border-radius: 50%;
background: #2f3640;
box-shadow: inset 0 0 50px rgba(150, 150, 150, 0);
animation: eclipse 10s infinite linear;
transform-origin: 50% 150%;
transform: rotate(-60deg);
}
@-moz-keyframes eclipse {
0% {
transform: rotate(-60deg);
}
90% {
transform: rotate(30deg);
}
100% {
transform: rotate(300deg);
}
}
@-webkit-keyframes eclipse {
0% {
transform: rotate(-60deg);
}
90% {
transform: rotate(30deg);
}
100% {
transform: rotate(50deg);
}
}
* {
box-sizing: border-box;
}
body {
background: #2f3640;
overflow: hidden;
}
#star {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 250px;
margin-left: -125px;
margin-top: -125px;
border-radius: 50%;
background: #fbc531;
box-shadow: 0 0 50px #e1b12c;
}
#planet {
position: absolute;
left: 0px;
top: 0px;
width: 250px;
height: 250px;
border-radius: 50%;
background: #2f3640;
box-shadow: inset 0 0 50px rgba(150, 150, 150, 0);
animation: eclipse 10s infinite linear;
transform-origin: 50% 150%;
transform: rotate(-60deg);
}
@-moz-keyframes eclipse {
0% {
transform: rotate(-60deg);
}
90% {
transform: rotate(30deg);
}
100% {
transform: rotate(300deg);
}
}
@-webkit-keyframes eclipse {
0% {
transform: rotate(-60deg);
}
90% {
transform: rotate(30deg);
}
100% {
transform: rotate(50deg);
}
}
Note : Copy Menggunakan CTRL + C
3). Langkah terakhir yaitu menambahkan script dibawah ini setelah tag <body> atau sebelum tag </body>.
Note : Copy Menggunakan CTRL + C4). Jalankan program htmlnya. Berikut Ini Adalah Contohnya.
/
/
See You Next Time Guys ●‿○
/
/
Oke itu saja yang dapat saya sampaikan.
Jangan Lupa Untuk Bookmark Blog Ini
Comments
Post a Comment