Animação Buraco Negro:
Aprenda a criar uma fascinante animação de um buraco negro com este tutorial detalhado usando apenas HTML e CSS.
Este projeto consiste em uma Animação que simula o buraco negro. Projeto indispensável para iniciantes na programação.
Um projeto open-source onde qualquer pessoa poderá clonar, alterar e fazer melhorias.
Veja a Animação de Buraco Negro em funcionamento neste link. Animação do Buraco Negro.
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>Animação do Buraco Negro</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="black-hole-container">
<div class="black-hole"></div>
<div class="accretion-disc"></div>
</div>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
margin: 0;
}
.black-hole-container {
position: relative;
width: 300px;
height: 300px;
}
.black-hole {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: black;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 2;
box-shadow: 0 0 60px 30px rgba(0, 0, 0, 0.7);
}
.accretion-disc {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 250px;
background: conic-gradient(from 90deg, rgba(255, 204, 0, 0.1), rgba(255, 204, 0, 0.5), rgba(255, 204, 0, 0.1));
border-radius: 50%;
transform: translate(-50%, -50%);
animation: spin 3s linear infinite;
opacity: 0.7;
z-index: 1;
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
3° Passo: Testar o Projeto!
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!
Se preferir os códigos estão no meu Repositório no GitHub.
Resultado vai ser igual o da imagem abaixo:
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando!
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!