16 lines
1.4 KiB
Markdown
16 lines
1.4 KiB
Markdown
|
# 🥞 Making Pancake Loader
|
||
|
|
|
||
|
|
Невероятно детальный и "вкусный" индикатор загрузки, имитирующий приготовление блинчика на сковороде. Полностью реализован на чистом CSS.
|
||
|
|
|
||
|
|
### Особенности
|
||
|
|
|
||
|
|
- **Комплексная физика**: Анимация включает в себя наклон сковороды (`flip`), подбрасывание блинчика (`jump`) и его переворот в воздухе (`fly`).
|
||
|
|
- **Эффект пара**: Реализован через систему "пузырьков" (`.bubble`) с разными задержками и кривыми Безье для естественности.
|
||
|
|
- **Адаптивность (vh/vw)**: Размеры элементов привязаны к высоте экрана, что позволяет лоадеру корректно масштабироваться.
|
||
|
|
|
||
|
|
### Технические детали
|
||
|
|
|
||
|
|
- **Keyframes Magic**: Используется 5 различных сценариев анимации, работающих синхронно.
|
||
|
|
- **3D Transform**: Переворот блинчика имитируется через `rotateX` и `rotateY`.
|
||
|
|
- **Typography**: Интегрирован шрифт "Amatic SC" через Google Fonts для создания уютной атмосферы.
|