genesis
29324fca97
— Добавлен Rolling Letters Loader (текстовый барабан) — Добавлен Helix DNA Loader (3D спираль) — Добавлен Lightsaber Fight Loader (сражение на мечах) — Добавлен Pancake Cooking Loader (подбрасывание блинчика) — Добавлен Pong Game Loader (ретро-игра) — Создан общий README.md с навигационной таблицей
16 lines
1.5 KiB
Markdown
Executable File
16 lines
1.5 KiB
Markdown
Executable File
# 🧬 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**: Четные и нечетные элементы имеют разные цвета (белый и ярко-розовый) для визуального разделения двух нитей спирали.
|