Tutorial Membuat Gerhana Matahari dengan html & css

Assalamualikum Wr.Wb

Oke guys Welcombek to my blog

Kali Ni gw Akan Sharing Tentang

Pemrograman html & css Tentang

Membuat gerhana matahari

Lanjut ke tutornya

Untuk Alat saya menggunakan

-Acode

-anwriter

-notepad++

Dll, boleh salah satunya and bisa di install di playstore

Lanjut Ke html

Bikin file Htmlnya dulu

Dengan ekstensi .html

Contoh:

Project.html

Boleh salin Codenya disini

<!DOCTYPE html>

<html>

<head>

<title>Gerhana MATAHARI</title>

</head>

<body>

Simpan file dengan ekstensi .html ya jangan ekstensi yg lain

Lanjut ke css nya

Buat lagi Filenya dan ketikam code seperti dibawah ini

margin-top: 370px;

padding: 0px;

box-sizing: border-box;

}

body{

animation: back 16s linear infinite;

}

.eclipse{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -500%);

width: 150px;

height: 150px;

}

.eclipse .sun{

position: absolute;

width: 100%;

height: 100%;

background: #ffad00;

border-radius: 50%;

box-shadow: 0px 0px 50px 4px #ffad00px;

animation: sun 16s ease-in-out infinite;

}

.eclipse .moon{

position: absolute;

top: 50%;

left: 50%;

width: 150px;

height: 150px;

background: #fff;

border-radius: 50%;

margin-top: 300px;

margin-left: -75px;

animation: moveMoon 16s linear infinite;

}

@keyframes moveMoon{

0%{

transform: translateX(150px);

background: #000;

}

50%{

transform: translateX(0px);

background: #000;

}

100%{

transform: translateX(-150px);

background: #000;

}

@keyframes back{

0%{

background: #fff;

}

50%{

background: #000;

}

100%{

background: #fff;

}

@keyframes sun{

50%{

box-shadow: 0px 0px 20px 4px #ffad00;

}

</body>

</html>

Itu dia code css nya

Simpal file dengan ekstensi .css ya ges ya

Jika mau keseluruhan menurut gw disini codenya

<!DOCTYPE html>

<html>
<head>
<title>Gerhana MATAHARI</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="eclipse">
<div class="sun"></div>
<div class="moon"></div>
<style>
*{
margin-top: 370px;
padding: 0px;
box-sizing: border-box;
}
body{
animation: back 16s linear infinite;
}
.eclipse{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -500%);
width: 150px;
height: 150px;
}
.eclipse .sun{
position: absolute;
width: 100%;
height: 100%;
background: #ffad00;
border-radius: 50%;
box-shadow: 0px 0px 50px 4px #ffad00px;
animation: sun 16s ease-in-out infinite;
}
.eclipse .moon{
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
background: #fff;
border-radius: 50%;
margin-top: 300px;
margin-left: -75px;
animation: moveMoon 16s linear infinite;
}
@keyframes moveMoon{
0%{
transform: translateX(150px);
background: #000;
}
50%{
transform: translateX(0px);
background: #000;
}
100%{
transform: translateX(-150px);
background: #000;
}
}
@keyframes back{
0%{
background: #fff;
}
50%{
background: #000;
}
100%{
background: #fff;
}
}
@keyframes sun{
50%{
box-shadow: 0px 0px 20px 4px #ffad00;
}
}
</style>
</body>
</html>