16 lines
1.4 KiB
Markdown
16 lines
1.4 KiB
Markdown
|
# 🧬 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**: Включены префиксы для стабильной работы в старых версиях браузеров.
|