genesis
4bbe7f68da
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
1.6 KiB
Executable File
1.6 KiB
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).