Як зробити анімацію завантаження на чистому css3

Ви тут: Головна - CSS - CSS3 - Як зробити анімацію завантаження на чистому CSS3.

Всім привіт! У цій статті ми будемо робити анімацію завантаження на чистому CSS3.

Можливо, вам зараз здається, що це дуже важко або взагалі неможливо, але ви помиляєтеся. Зробити анімацію завантаження на CSS3 дуже легко! Давайте розберемося, як.

Для початку створимо блок div в html

Тепер перейдемо до стилям

@keyframes spin 100% transform: rotate (360deg);
>
>
.spinner width: 30px;
height: 30px;
border: 6px solid # 000;
border-left-color: # 333;
border-right-color: transparent;
border-bottom-color: # 555;
border-radius: 100%;
animation: spin 600ms infinite linear;
>

От і все! Наша анімація готова! Просто, чи не так? Тепер варто сказати пару слів про те, як ми це зробили, щоб питань більше не залишилося.

Спочатку ми просто задаємо ширину і висоту нашого блоку, потім робимо у нього рамку в 6px чорним суцільним кольором. Далі ми робимо ліву і нижню межі різними кольорами, а праву робимо прозорою, щоб ефект був більш краще видно. В кінці ми просто округляти це все за допомогою властивості border-radius і запускаємо лінійну анімацію, яка просто обертає наш коло.

Ось так просто можна зробити анімацію завантаження на CSS3.

Дякую за увагу і удачі!