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

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

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

Відео: Preloader - смуга завантаження сайту (NProgress.js)

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

class="Spinner"gt;

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

@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- 
}

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

Відео: CSS Анімація картинки при наведенні / працюємо з: before та: after

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

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

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

Поділися в соціальних мережах:

Схожі