Animação Pôr do Sol:
Aprenda a criar uma linda animação de pôr do sol com este tutorial simples e detalhado, usando apenas HTML e CSS.
Este projeto consiste em uma Animação, que Simula o pôr do sol. Projeto indispensável para iniciantes na programação.
Veja a Animação do Pôr do Sol em funcionamento neste link. Animação do Pôr do Sol.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 Pôr do Sol</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sky">
<div class="sun"></div>
</div>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #87CEFA;
}
.sky {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #87CEFA 0%, #FF4500 100%);
animation: changeSky 10s linear infinite;
}
.sun {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
background-color: #FFA500;
border-radius: 50%;
animation: sunset 10s linear infinite;
}
@keyframes sunset {
0% { bottom: 100%; }
100% { bottom: -10%; }
}
@keyframes changeSky {
0% { background: linear-gradient(to bottom, #2F4F4F 0%, #191970 100%); }
100% { background: linear-gradient(to bottom, #87CEFA 0%, #FF4500 100%); }
}
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!