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