16 lines
1.5 KiB
Markdown
16 lines
1.5 KiB
Markdown
|
# 🧬 Helix CSS Loader
|
||
|
|
|
||
|
|
Сложный анимированный лоадер, имитирующий вращение двойной спирали (DNA Helix). Построен на чистом CSS с использованием 26 анимированных элементов.
|
||
|
|
|
||
|
|
### Особенности
|
||
|
|
|
||
|
|
- **3D Illusion**: Эффект объема достигается за счет синхронизации перемещения (`translate3d`), изменения масштаба (`scale`) и управления слоями (`z-index`).
|
||
|
|
- **Smooth Gradient**: Фон с использованием `linear-gradient` подчеркивает глубину анимации.
|
||
|
|
- **Pure CSS**: Не требует JavaScript, вся логика завязана на задержках (`animation-delay`) для каждого отдельного "узла" спирали.
|
||
|
|
|
||
|
|
### Технические детали
|
||
|
|
|
||
|
|
- **Movement**: Ключевой кадр `@keyframes movement` отвечает за вертикальное перемещение.
|
||
|
|
- **Size/Opacity**: `@keyframes size-opacity` создает эффект приближения и удаления точек, меняя их размер и прозрачность.
|
||
|
|
- **Dual Color**: Четные и нечетные элементы имеют разные цвета (белый и ярко-розовый) для визуального разделения двух нитей спирали.
|