Neste tutorial, você aprenderá a criar uma simulação animada do Sistema Solar usando apenas HTML e CSS. Este é um excelente exercício para praticar suas habilidades de estilização e animação.
Pré-requisitos
Certifique-se de ter:
- Um editor de código (ex.: VS Code).
- Um navegador web atualizado (ex.: Google Chrome).
- Conhecimento básico de HTML e CSS.
Veja o projeto em funcionamento neste link. Sistema Solar Completo.
Veja o vídeo no YouTube:
Passo 1: Estrutura do Projeto
Crie os seguintes arquivos no seu ambiente local:
index.html: O arquivo HTML com a estrutura do sistema solar.
style.css: O arquivo CSS para estilização e animação.
1. Arquivo index.html
Adicione o seguinte código ao seu arquivo 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 class="orbit jupiter-orbit"></div>
<div class="jupiter-spin">
<div id="jupiter"></div>
</div>
<div class="orbit saturn-orbit"></div>
<div class="saturn-spin">
<div id="saturn"></div>
</div>
<div class="orbit uranus-orbit"></div>
<div class="uranus-spin">
<div id="uranus"></div>
</div>
<div class="orbit neptune-orbit"></div>
<div class="neptune-spin">
<div id="neptune"></div>
</div>
</div>
</body>
</html>
2. Arquivo style.css
Agora, adicione o seguinte código ao arquivo style.css:
html, body {
background-color: #121215;
}
.solar-system {
position: relative;
width: 1600px;
height: 1600px;
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-left: -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: #C89104;
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: #5A3437;
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;
}
#jupiter {
margin-top: -45px;
margin-left: -45px;
height: 90px;
width: 90px;
background-color: #d4a15a;
box-shadow: 0 0 30px #b07d39;
}
.jupiter-orbit, .jupiter-spin {
width: 900px;
height: 900px;
margin-top: -450px;
margin-left: -450px;
}
#saturn {
margin-top: -40px;
margin-left: -40px;
height: 80px;
width: 80px;
background-color: #F0A41C;
box-shadow: 0 0 30px #b07d39;
}
.saturn-orbit, .saturn-spin {
width: 1100px;
height: 1100px;
margin-top: -550px;
margin-left: -550px;
}
#uranus {
margin-top: -35px;
margin-left: -35px;
height: 70px;
width: 70px;
background-color: #0CB4B6;
box-shadow: 0 0 30px #397db0;
}
.uranus-orbit, .uranus-spin {
width: 1300px;
height: 1300px;
margin-top: -650px;
margin-left: -650px;
}
#neptune {
margin-top: -33px;
margin-left: -33px;
height: 66px;
width: 66px;
background-color: #405d93;
box-shadow: 0 0 30px #2d3f6f;
}
.neptune-orbit, .neptune-spin {
width: 1500px;
height: 1500px;
margin-top: -750px;
margin-left: -750px;
}
@keyframes spin-right {
100% {
transform: rotate(360deg);
}
}
.earth-spin {
animation: spin-right 20s linear infinite;
}
.moon-spin {
animation: spin-right 5s linear infinite;
}
.venus-spin {
animation: spin-right 15s linear infinite;
}
.mercury-spin {
animation: spin-right 10s linear infinite;
}
.mars-spin {
animation: spin-right 30s linear infinite;
}
.jupiter-spin {
animation: spin-right 35s linear infinite;
}
.saturn-spin {
animation: spin-right 45s linear infinite;
}
.uranus-spin {
animation: spin-right 55s linear infinite;
}
.neptune-spin {
animation: spin-right 65s linear infinite;
}
Passo 2: Visualizando o Projeto
Abra o arquivo index.html no navegador. Você verá o Sol no centro, com os planetas girando ao redor em órbitas circulares, incluindo a Lua girando em torno da Terra.
Se preferir, os códigos estão no meu Repositório no GitHub.
Conclusão
Você criou um Sistema Solar animado utilizando apenas HTML e CSS. Esse projeto demonstra como usar animações CSS e posicionamento absoluto para criar simulações visuais dinâmicas.
Se gostou, compartilhe este tutorial e crie sua própria versão personalizada do Sistema Solar!
Comentários
Postar um comentário
Obrigado pelo seu feedback!