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
parent 29324fca97
commit 4145ca07c4
12 changed files with 590 additions and 7 deletions
@@ -0,0 +1,15 @@
+# 🧬 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**: Включены префиксы для стабильной работы в старых версиях браузеров.