16 lines
1.5 KiB
Markdown
16 lines
1.5 KiB
Markdown
|
# ✨ CSS Fireflies Background
|
||
|
|
|
||
|
|
Элегантный и спокойный фон с анимированными светлячками. Полностью реализован на чистом HTML/CSS, создавая глубокую атмосферу за счет хаотичного движения и мягкого мерцания.
|
||
|
|
|
||
|
|
### Особенности
|
||
|
|
|
||
|
|
- **Natural Motion**: Каждый светлячок движется по уникальной траектории, заданной через сложные `@keyframes` (move1, move2 и т.д.).
|
||
|
|
- **Double Animation**: Элементы используют комбинацию зацикленного движения (`drift`) и мерцания (`flash`).
|
||
|
|
- **Zero JS**: Анимация не требует скриптов и работает плавно благодаря аппаратной поддержке трансформаций.
|
||
|
|
|
||
|
|
### Технические детали
|
||
|
|
|
||
|
|
- **Particles**: Светлячки созданы с использованием псевдоэлементов `::before` (тень/тело) и `::after` (свечение).
|
||
|
|
- **Glow**: Эффект свечения реализован через `box-shadow: yellow` с анимацией прозрачности.
|
||
|
|
- **Randomization**: Разнообразие достигается за счет использования `nth-child` с разными задержками и длительностью анимации.
|