Skip to content Skip to sidebar Skip to footer
Home / HTML dan CSS / Programmer

Buat Gerhana Matahari Dengan HTML dan CSS

by Gerai Anime Post a Comment

 


Gerhana matahari terjadi ketika posisi bulan terletak di antara bumi dan matahari sehingga terlihat menutup sebagian atau seluruh cahaya matahari di langit bumi. Berdasarkan cara tertutupnya matahari, terdapat empat jenis gerhana matahari: gerhana matahari total, gerhana matahari cincin, gerhana matahari sebagian, dan gerhana matahari hibrida/campuran. Walaupun bulan berukuran sekitar 400 kali lebih kecil daripada matahari, bulan terletak sekitar 400 kali lebih dekat ke bumi sehingga kedua benda langit ini tampak hampir sama besar di langit bumi. Karena orbit bulan berbentuk elips, jaraknya dari bumi sedikit berubah-ubah sehingga kadang tampak lebih besar dan mampu menutupi matahari (menyebabkan gerhana total) atau kadang lebih kecil dan hanya dapat menyebabkan gerhana matahari cincin

Membuat Gerhana Matahari Dengan HTML dan CSS

Disini saya akan memberikan tutorial bagaimana cara membuat animasi gerhana matahari dengan html dan css, gimana caranya. ok langsung saja ke tutorialnya......

 

1) pertama buka text editor kalian dan buat folder baru dengan nama gerhana

2 )lalu buat sebuah file baru dengan nama index.html dan juga style.css didalam folder tersebut

3) ketik kodingan dibawah ini atau juga bisa kalian kopi ke dalam file index.html lalu kalian save.

<!DOCTYPE html>
<!-- Created By Djazuli Ahmad -->
<html>
<head>
    <title>Gerhana</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="eclipse">
        <div class="sun"></div>
        <div class="moon"></div>
    </div>
</body>
</html>
 

4) selanjutnya kalian ketik kodingan dibawah ini ke dalam file style.css lalu kalian save.

*{
	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;
	}
}

5) setelah itu buka file index kalian lalu kalian buka dengar browser kalian dengan cara klik kanan lalu pilih open width kemudian pilih browser yang kalian pakai. maka hasilnya akan jadi seperti ini.

Link Source Code Gerhana

 



Post a Comment for "Buat Gerhana Matahari Dengan HTML dan CSS"