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