Neste tutorial, você aprenderá como criar uma árvore de Natal estilizada com luzes piscando usando HTML, CSS e JavaScript. Este é um projeto divertido para praticar manipulação de DOM,
animações e estilização com CSS.Veja a Árvore de Natal com Luzes piscando em funcionamento neste link. Árvore de Natal com Luzes Piscando.
Veja o vídeo no YouTube:
Passo 1: Preparando a Estrutura do Projeto
Crie uma pasta para o projeto e, dentro dela, os seguintes arquivos:
index.html
style.css
script.js
Certifique-se de vincular os arquivos CSS e JavaScript no HTML.
Passo 2: Estruturando o HTML
Adicione o código abaixo no 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>Árvore de Natal com Luzes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tree">
<div class="star"></div>
<div class="layer layer-1">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
<div class="layer layer-2">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
<div class="layer layer-3">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
<div class="trunk"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Explicação:
.tree
: Contém toda a estrutura da árvore.
.layer
: Representa cada camada da árvore (os triângulos).
.light
: Cada luz da árvore.
.trunk
: O tronco da árvore.
.star
: A estrela no topo.
Passo 3: Estilizando com CSS
No arquivo style.css
, adicione os estilos para a árvore e seus elementos:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #0c1e3e;
}
.tree {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.star {
width: 50px;
height: 50px;
background: gold;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
margin-bottom: -10px;
}
.layer {
position: relative;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 80px solid #2e8b57;
margin: -10px 0;
}
.layer-2 {
border-left-width: 120px;
border-right-width: 120px;
border-bottom-width: 100px;
}
.layer-3 {
border-left-width: 140px;
border-right-width: 140px;
border-bottom-width: 120px;
}
.trunk {
width: 40px;
height: 60px;
background: #8b4513;
border-radius: 5px;
}
.light {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #444;
box-shadow: 0 0 10px #000;
transition: background-color 0.5s, box-shadow 0.5s;
}
.layer-1 .light:nth-child(1) {
top: 40px;
left: -43px;
}
.layer-1 .light:nth-child(2) {
top: 40px;
left: -8px;
}
.layer-1 .light:nth-child(3) {
top: 40px;
left: 30px;
}
.layer-2 .light:nth-child(1) {
top: 60px;
left: -63px;
}
.layer-2 .light:nth-child(2) {
top: 60px;
left: -8px;
}
.layer-2 .light:nth-child(3) {
top: 60px;
left: 50px;
}
.layer-3 .light:nth-child(1) {
top: 80px;
left: -83px;
}
.layer-3 .light:nth-child(2) {
top: 80px;
left: -8px;
}
.layer-3 .light:nth-child(3) {
top: 80px;
left: 70px;
}
Passo 4: Animando as Luzes com JavaScript
No arquivo script.js
, adicione o código abaixo para criar o efeito de piscada das luzes:
// Seleciona todas as luzes
const lights = document.querySelectorAll('.light');
// Função para alternar as cores das luzes
function twinkleLights() {
lights.forEach(light => {
const colors = ['red', 'yellow', 'blue', 'green', 'orange', 'white'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
light.style.backgroundColor = randomColor;
light.style.boxShadow = `0 0 15px ${randomColor}`;
});
}
// Alterna as cores a cada 500ms
setInterval(twinkleLights, 500);
O que está acontecendo?
- Selecionamos todas as luzes da árvore usando
querySelectorAll
.
- A função
twinkleLights
troca a cor de cada luz para uma cor aleatória.
- O efeito de piscada é criado com o método
setInterval
, que executa a função a cada 500ms.
Resultado Final
Ao abrir o arquivo index.html
no navegador, você verá uma árvore de Natal estilizada com luzes coloridas piscando.
Possíveis Melhorias
- Adicionar interatividade:
- Um botão para ligar/desligar as luzes.
- Personalização:
- Permitir que o usuário escolha as cores das luzes.
- Efeitos extras:
- Adicionar neve caindo usando animações CSS.
Se preferir os códigos estão no meu Repositório no GitHub.
Este projeto é uma ótima introdução para praticar manipulação de DOM e animações dinâmicas. Experimente adaptá-lo e compartilhe sua criação!
Boas festas e bons códigos! 🎅🎄
Comentários
Postar um comentário
Obrigado pelo seu feedback!