16 lines
1.6 KiB
Markdown
16 lines
1.6 KiB
Markdown
|
# 🌌 Parallax Star Background
|
||
|
|
|
||
|
|
Многослойный анимированный фон звездного неба с эффектом параллакса. Звезды разного размера движутся с разной скоростью, создавая ощущение полета сквозь глубокий космос.
|
||
|
|
|
||
|
|
### Особенности
|
||
|
|
|
||
|
|
- **Performance Optimized**: Сотни звезд генерируются как тени (`box-shadow`) одного элемента, что значительно экономит ресурсы процессора.
|
||
|
|
- **Parallax Effect**: Три слоя звезд (`#stars`, `#stars2`, `#stars3`) движутся с разной скоростью, создавая иллюзию объема.
|
||
|
|
- **Pure CSS**: Вся логика анимации и визуализации построена на стандартных свойствах CSS без использования тяжелых JS-библиотек.
|
||
|
|
|
||
|
|
### Технические детали
|
||
|
|
|
||
|
|
- **Background**: Используется `radial-gradient` для создания мягкого свечения у горизонта.
|
||
|
|
- **Keyframes**: Анимация `animStar` плавно перемещает слои снизу вверх, зацикливая движение.
|
||
|
|
- **Sass Origin**: Оригинальный код был сгенерирован функцией Sass для рандомизации координат, в текущем репозитории представлена чистая CSS-версия.
|