genesis
4bbe7f68da
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
16 lines
1.6 KiB
Markdown
Executable File
16 lines
1.6 KiB
Markdown
Executable File
# 🪐 Solar System Orrery
|
|
|
|
Масштабная интерактивная модель Солнечной системы (Orrery), реализованная на чистом CSS3. Проект включает в себя Солнце и все планеты, вращающиеся по своим орбитам с реалистичным соотношением скоростей.
|
|
|
|
### Особенности
|
|
|
|
- **Pure CSS Motion**: Каждая планета использует уникальную анимацию `@keyframes` для вращения по орбите.
|
|
- **Visual Accuracy**: Соблюдены относительные размеры планет и периоды их обращения (от быстрого Меркурия до медленного Плутона).
|
|
- **Infinite Background**: Использование повторяющегося звездного фона для создания эффекта глубокого космоса.
|
|
|
|
### Технические детали
|
|
|
|
- **Orbital Mechanics**: Анимация реализована через двойную трансформацию (`rotate` -> `translateY` -> `rotate`), что позволяет планетам сохранять вертикальную ориентацию во время вращения.
|
|
- **Timing**: Значения `animation-duration` подобраны в соответствии с реальными астрономическими данными.
|
|
- **Layers**: Четкое разделение слоев (`z-index`) для планет и их орбитальных путей (`-path`).
|