https://github.com/ninja1375/animated-candles-with-css
Animated Candles with CSS
https://github.com/ninja1375/animated-candles-with-css
candles css3 html5
Last synced: about 2 months ago
JSON representation
Animated Candles with CSS
- Host: GitHub
- URL: https://github.com/ninja1375/animated-candles-with-css
- Owner: Ninja1375
- Created: 2024-12-17T01:00:11.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-18T22:52:22.000Z (5 months ago)
- Last Synced: 2025-02-14T15:19:33.033Z (3 months ago)
- Topics: candles, css3, html5
- Language: CSS
- Homepage: https://ninja1375.github.io/animated-candles-with-css/
- Size: 46.9 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Animated Candles with CSS
Este projeto apresenta uma animação criativa de velas utilizando HTML5 e CSS3 puro, com elementos interativos e visuais que incluem olhos piscando, chamas dançantes e efeitos de fundo dinâmicos.
## 🔥 Destaques da Animação
Velas com expressões faciais animadas
Os olhos piscam em intervalos realistas, criando uma expressão divertida e envolvente.
**Chama da vela animada**
O movimento sutil da chama simula o efeito natural do fogo utilizando keyframes CSS.
**Efeitos de fumaça**
A fumaça se dissipa com animações suaves, trazendo mais realismo ao projeto.
**Transições de fundo**
Um fundo dinâmico com cores em transição contínua, proporcionando uma experiência visual agradável.
## 🚀 Tecnologias Utilizadas
**HTML5:** Estrutura básica do projeto.
**CSS3:** Estilização, keyframes e animações puras.
## 📂 Estrutura do Projeto
A organização dos arquivos é simples e direta:
```plaintext
animated-candles-with-css/
│-- index.html # Estrutura HTML do projeto
│-- style.css # Estilização e animações CSS
└-- README.md # Documentação do projeto
```
## 🎥 Pré-visualização
Para visualizar a animação:
Faça o clone do projeto:
```bash
git clone https://github.com/Ninja1375/animated-candles-with-css.git
```
Abra o arquivo `index.html` em qualquer navegador moderno.
## 🛠️ Como Funciona
Principais Animações
**Olhos Piscando**
Criado com `@keyframes` alternando a opacidade e altura dos olhos.
```css
@keyframes blink-eyes {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.1); }
}
```
**Movimento da Chama**
Simula o balanço natural do fogo.
```css
@keyframes dance-fire {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(2deg); }
}
```
**Fumaça Subindo**
Animação suave movendo elementos para cima e para os lados.
```css
@keyframes move-smoke {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-50px); }
}
```
**Fundo Dinâmico**
Alterna entre cores usando `@keyframes`.
```css
@keyframes change-background {
0% { background-color: #fef3d3; }
50% { background-color: #ffccbc; }
100% { background-color: #fef3d3; }
}
```
## 🎨 Captura de Tela
## 💡 Inspiração
Este projeto foi desenvolvido para demonstrar o poder do **CSS puro** na criação de animações interativas e criativas.
Se gostou do projeto, deixe uma estrela ⭐ no repositório!
## Apoie-me:
