Files

T

genesis 4145ca07c4 feat: добавить лоадеры Dots, Rotating Text и DNA Strain

— Добавлен dots-pulsating (минимализм на CSS-переменных)
— Добавлен rotating-text (эффект переворота букв с использованием JS)
— Добавлен dna-strain (научная анимация цепочки ДНК)
— Обновлен общий README.md: коллекция расширена до 8 элементов

2026-04-04 22:31:42 +03:00

src

feat: добавить лоадеры Dots, Rotating Text и DNA Strain

2026-04-04 22:31:42 +03:00

README.md

feat: добавить лоадеры Dots, Rotating Text и DNA Strain

2026-04-04 22:31:42 +03:00

README.md

🧬 DNA Strain Loader

Элегантная двумерная анимация цепочки ДНК, реализованная на чистом CSS. Имитирует вращение за счет динамического изменения ширины соединительных линий и масштабирования узлов.

Особенности

Pure CSS: Вся логика вращения построена на @keyframes без использования сторонних скриптов.
Pseudo-elements: Узлы цепочки реализованы через :before и :after, что минимизирует количество HTML-разметки.
Cascading Delay: Эффект плавной волны достигается за счет точечной настройки animation-delay для 12 последовательных элементов.

Технические детали

Rotation Illusion: Анимация rotate-strain циклически меняет ширину линии от 155px до 0.
Sync Scaling: Узлы меняют размер (scale) и положение синхронно с линией, создавая иллюзию объема.
Webkit Support: Включены префиксы для стабильной работы в старых версиях браузеров.