https://github.com/ninja1375/arvore-de-natal-com-luzes-piscando
Árvore de Natal com Luzes piscando
https://github.com/ninja1375/arvore-de-natal-com-luzes-piscando
css html javascript
Last synced: about 2 months ago
JSON representation
Árvore de Natal com Luzes piscando
- Host: GitHub
- URL: https://github.com/ninja1375/arvore-de-natal-com-luzes-piscando
- Owner: Ninja1375
- Created: 2024-12-03T18:44:36.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-05T19:45:06.000Z (6 months ago)
- Last Synced: 2025-02-07T19:16:32.909Z (4 months ago)
- Topics: css, html, javascript
- Language: CSS
- Homepage: https://ninja1375.github.io/Arvore-de-Natal-Com-Luzes-Piscando/
- Size: 3.27 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.youtube.com/watch?v=mnuuXH0rq_E)
**Veja o projeto ao vivo:**
🌲 **[Árvore de Natal com Luzes Piscando](https://ninja1375.github.io/Arvore-de-Natal-Com-Luzes-Piscando/)**
Este projeto utiliza HTML, CSS e JavaScript para criar uma **Árvore de Natal** estilizada e interativa. A árvore é composta por três camadas triangulares com luzes coloridas que piscam alternadamente, criando um efeito visual alegre e festivo. O tronco e a estrela no topo complementam o design.
O objetivo principal é combinar habilidades de posicionamento no CSS e manipulação de elementos com JavaScript para criar um efeito dinâmico e visualmente agradável.
# Funcionalidades
**Árvore de Natal Responsiva:**
A estrutura da árvore é desenhada usando apenas CSS com propriedades como border para criar os triângulos (camadas).
Possui uma estrela decorativa no topo, estilizada com clip-path.
**Luzes Piscantes:**
Cada camada da árvore possui três luzes, posicionadas uniformemente.
As luzes piscam alternadamente com diferentes cores (vermelho, verde, azul, amarelo, laranja e branco).
O efeito de piscada é controlado por intervalos independentes para cada camada, criando um padrão dinâmico.
**Estilo Festivo:**
Fundo escuro para destacar a árvore e as luzes.
Sombras e gradientes suaves para realçar os detalhes.
**Animações Interativas:**
As luzes alternam suas cores usando transições suaves de background-color e box-shadow.
## Tecnologias Utilizadas
>**HTML:** Para estruturar os elementos da árvore, luzes, tronco e estrela.
>**CSS:** Para estilizar a árvore, posicionar as luzes e criar o design geral.
>**JavaScript:** Para implementar a funcionalidade de piscada nas luzes com intervalos controlados.
## Possíveis Melhorias
**Efeitos Sonoros:**
Adicionar sons de Natal ou músicas de fundo para complementar o clima festivo.
**Interatividade:**
Implementar um botão para ligar/desligar as luzes.
Permitir ao usuário escolher as cores das luzes ou ajustar a velocidade da piscada.
**Efeitos de Neve:**
Criar animações de neve caindo usando CSS ou JavaScript.
**Versão Mobile:**
Garantir que o design seja responsivo para diferentes tamanhos de tela, como dispositivos móveis.
## Como Usar
Abra o arquivo `index.html` em um navegador para visualizar a árvore.
As luzes começarão a piscar automaticamente.
Modifique o JavaScript ou CSS para personalizar as cores, posições ou comportamento das luzes.
Este projeto é ideal para quem deseja aprender ou praticar técnicas de animação e posicionamento em CSS, combinadas com manipulação de DOM usando JavaScript!
## Apoie-me:
