16 lines
1.2 KiB
Markdown
16 lines
1.2 KiB
Markdown
|
# 🧊 Animated Cubes Background
|
||
|
|
|
||
|
|
Геометрический анимированный фон с разлетающимися и вращающимися кубами. Создает эффект глубины и динамики для лендингов или героических (Hero) секций.
|
||
|
|
|
||
|
|
### Особенности
|
||
|
|
|
||
|
|
- **3D Motion**: Использование `scale` и `rotate` в одном ключевом кадре создает иллюзию полета кубов из центра.
|
||
|
|
- **Pure CSS**: Анимация работает без JavaScript, что минимизирует нагрузку на браузер.
|
||
|
|
- **Staggered Effect**: Разное время появления кубов реализовано через `animation-delay`.
|
||
|
|
|
||
|
|
### Технические детали
|
||
|
|
|
||
|
|
- **Animation**: Основной цикл `cube` длится 12 секунд с плавным затуханием (`opacity: 0`).
|
||
|
|
- **Positions**: Кубы распределены по экрану с помощью `vw` (ширина) и `vh` (высота).
|
||
|
|
- **Typography**: Используется шрифт **Montserrat**, импортируемый из Google Fonts.
|