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