Sistema Solar:
Aprenda a criar uma visualização interativa do Sistema Solar com este tutorial detalhado.
Este projeto é muito bom pra quem está aprendendo linguagens de programação, principalmente nestas 2 linguagens: HTML e CSS.
Este projeto consiste em um Sistema Solar com alguns planetas do sistema solar, uma Animação com os planetas em órbita em torno do sol.
Veja o Sistema Solar em funcionamento neste link. Sistema Solar.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie duas pastas com os nomes... index.html e style.css.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema Solar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="solar-system">
<div id="sun"></div>
<div class="orbit mercury-orbit"></div>
<div class="mercury-spin">
<div id="mercury"></div> </div> <div class="orbit venus-orbit"></div>
<div class="venus-spin">
<div id="venus"></div> </div>
<div class="orbit earth-orbit"></div>
<div class="earth-spin">
<div class="orbit moon-orbit"></div>
<div class="moon-spin">
<div id="moon"></div> </div>
<img src="https://i.ibb.co/PMRQCc6/earth.png" id="earth" /> </div>
<div class="orbit mars-orbit"></div>
<div class="mars-spin">
<div id="mars"></div> </div> </div>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
html, body {
background-color: #121215;
}
.solar-system {
position: relative;
width: 780px;
height: 780px;
margin: auto;
overflow: hidden;
}
.orbit {
border: 1px dashed #666;
}
#sun, .orbit, .orbit + div, .orbit + div > div {
position: absolute;
}
#sun, .orbit, .orbit + div {
top: 50%;
left: 50%;
}
.orbit + div > div {
top: 0;
left: 50%;
}
.orbit, .orbit + div div, #earth {
border-radius: 50%;
}
#sun {
height: 150px;
width: 150px;
background-color: #fae20a; margin-top: -75px;
margin-left: -75px; border-radius: 50%;
box-shadow: 0 0 80px orange;
}
#earth {
position: absolute;
top: 0;
left: 50%;
height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px; border-radius: 50%;
box-shadow: 0 0 30px #3a4385;
}
.earth-orbit, .earth-spin {
width: 500px;
height: 500px;
margin-left: -250px;
margin-top: -250px;
}
#moon {
margin-top: -6px;
margin-top: -6px;
height: 12px;
width: 12px;
border-radius: 50%; background-color: white; box-shadow: 0 0 15px #3a4385;
}
.moon-orbit, .moon-spin {
height: 90px;
width: 90px;
margin-top: -45px;
margin-left: -45px;
border-color: #447;
}
#venus {
margin-top: -20px;
margin-left: -20px;
height: 40px;
width: 40px;
background-color: #3498db; box-shadow: 0 0 30px #3a4385;
}
.venus-orbit, .venus-spin {
margin-top: -185px;
margin-left: -185px;
height: 370px;
width: 370px;
}
#mercury {
margin-top: -13.5px;
margin-left: -13.5px;
height: 25px;
width: 25px;
background-color: #a65e22; box-shadow: 0 0 30px #3a4385;
}
.mercury-orbit, .mercury-spin {
width: 280px;
height: 280px;
margin-top: -140px;
margin-left: -140px;
}
#mars {
margin-top: -26px;
margin-left: -26px;
height: 60px;
width: 60px;
border-radius: 50%; background-color: #863222; box-shadow: 0 0 15px #a64232;
}
.mars-orbit, .mars-spin {
width: 700px;
height: 700px;
margin-top: -350px;
margin-left: -350px;
}
@keyframes spin-right {
100% {
transform: rotate(360deg);
}
}
.earth-spin {
animation: spin-right 36.5s linear infinite;
}
.moon-spin {
animation: spin-right 3s linear infinite;
}
.venus-spin {
animation: spin-right 22s linear infinite;
}
.mercury-spin {
animation: spin-right 8.8s linear infinite;
}
.mars-spin {
animation: spin-right 68.7s linear infinite;
}
Agora, com os dois arquivos (index.html e style.css) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Comentários
Postar um comentário
Obrigado pelo seu feedback!