⚠️Наверное все из наших подписчиков заходя на различные сайты когда-то задавались, с первого взгляда наивным, но на самом деле часто задаваемым вопросом среди новичков:
- А как работает анимация загрузки этого сайта?
В этой статье мы попробуем дать основные понятия для понимания данной темы и раскрыть непонятные детали...Приступим.
👉🏻в HTML коде всё предельно ясно на интуитивном уровне.
Подробно расскажем только про CSS - часть, где и таится вся красота веб разработки.
✅ про CSS
Слой layer1 является слоем для анимации, а слой layer2 для фона.
строка
background: linear-gradient(0deg, rgba(0,54,255,0.2)5%, rgba(0,54,255,1)100%);ставит как цвет линейный градиент.
Более интересна строка
animation: var 1.5s cubic-bezier(.17,.67,.83,.67) infinite;.В нём есть
var как тип анимации, которая определена строкой ниже.1.5s - интервал выполнения анимации (периодичность).animation: var 1.5s cubic-bezier (.17, .67, .83, .67) - Функция cubic-bezier () определяет кубическую кривую Безье. Кубичиская кривая Безье определяется четырьмя точками P0, P1, P2 и P3. P0 и P3 - это начало и конец кривой, и в CSS эти точки фиксированы, поскольку координаты являются отношениями. P0 равен (0, 0) и представляет начальное время и начальное состояние, P3 равен (1, 1) и представляет конечное время и конечное состояние. infinite - ключевое слово, которое определяет бесконечность анимации.@keyframes - в этом куске кода :@keyframes var{ 0%{transform:rotate(0);} 100% {transform: rotate(340deg);} }определяет код анимации.
