Анімація при завантаженні на css3

Коли сайт подгружается, можна зробити так, щоб користувач не дивився на появу окремих частин сайту, а дочекався завантаження всього сайту і побачив його повністю завантажений варіант. Для цього використовуються прогрес бари. І зазвичай робиться так, що основна частина затемнюється, а видно тільки прогрес бар. І сьогодні я хочу представити 3 види анімації при завантаженні на CSS3.

Приклад 3-х прогрес барів можна побачити тут:

Подивитися прімерСкачать

Перший вид прогрес бару

HTML частина

Розмітка дуже проста. Ми створимо невпорядкований список і всередині два блоки для створення ефекту анімації шляхом заповнення одного з них:

12345678910111213141516171819202122

lt;ul id="Progress"gt;lt;ligt;lt;div id="Layer1" class="Ball"gt; lt;/divgt;lt;div id="Layer7" class="Pulse"gt; lt;/divgt;lt;/ligt;lt;ligt;lt;div id="Layer2" class="Ball"gt; lt;/divgt;lt;div id="Layer8" class="Pulse"gt; lt;/divgt;lt;/ligt;lt;ligt;lt;div id="Layer3" class="Ball"gt; lt;/divgt;lt;div id="Layer9" class="Pulse"gt; lt;/divgt;lt;/ligt;lt;ligt;lt;div id="Layer4" class="Ball"gt; lt;/divgt;lt;div id="Layer10" class="Pulse"gt; lt;/divgt;lt;/ligt;lt;ligt;lt;div id="Layer5" class="Ball"gt; lt;/divgt;lt;div id="Layer11" class="Pulse"gt; lt;/divgt;lt;/ligt;lt;/ulgt;

Відео: Фішки верстки

CSS частина

Тут ми спочатку задаємо прості стилі для списків, а потім за допомогою властивостей анімації створюємо ефект заповнення:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394

ul#progress {list-style:none-width:125px-margin:0 auto-padding-top:50px-padding-bottom:50px-}ul#progress li {float:left-position:relative-width:15px-height:15px-border:1px solid #fff-border-radius:50px-margin-left:10px-border-left:1px solid # 111-border-top:1px solid # 111-border-right:1px solid # 333-border-bottom:1px solid # 333-background:# 000-}ul#progress li: First-child {margin-left:0-}.running .ball {background-color:# 2187e7-background-image: -moz-linear-gradient(90deg, # 2187e7 25%, # a0eaff)-background-image: -webkit-linear-gradient(90deg, # 2187e7 25%, # a0eaff)-width:15px-height:15px-border-radius:50px--moz-transform:scale(0)--webkit-transform:scale(0)--moz-animation:loading 1s linear forwards--webkit-animation:loading 1s linear forwards-}.running .pulse {width:15px-height:15px-border-radius:30px-border: 1px solid # 00c6ff-box-shadow: 0 0 5px # 00c6ff-position:absolute-top:-1px-left:-1px--moz-transform:scale(0)--webkit-transform:scale(0)--webkit-animation:pulse 1s ease-out--moz-animation:pulse 1s ease-out-}# layer1 { -moz-animation-delay:0.5s- -webkit-animation-delay:0.5s- }# layer2 { -moz-animation-delay:1s- -webkit-animation-delay:1s- }# layer3 { -moz-animation-delay:1.5s- -webkit-animation-delay:1.5s- }# layer4 { -moz-animation-delay:2s- -webkit-animation-delay:2s- }# layer5 { -moz-animation-delay:2.5s- -webkit-animation-delay:2.5s- }# layer7 { -moz-animation-delay:1.5s- -webkit-animation-delay:1.5s- }# layer8 { -moz-animation-delay:2s- -webkit-animation-delay:2s- }# layer9 { -moz-animation-delay:2.5s- -webkit-animation-delay:2.5s- }# layer10 { -moz-animation-delay:3s- -webkit-animation-delay:3s- }# layer11 { -moz-animation-delay:3.5s- -webkit-animation-delay:3.5s- }@ -moz-keyframes loading {0%{-moz-transform:scale(0,0)-}100%{-moz-transform:scale(1,1)-}}@ -webkit-keyframes loading {0%{-webkit-transform:scale(0,0)-}100%{-webkit-transform:scale(1,1)-}}@ -moz-keyframes pulse {0% {-moz-transform: scale(0)-opacity: 0-}10%{-moz-transform: scale(1)-opacity: 0.5-}50%{-moz-transform: scale(1.75)-opacity: 0-}100% {-moz-transform: scale(0)-opacity: 0-}}@ -webkit-keyframes pulse {0%{-webkit-transform: scale(0)-opacity: 0-}10%{-webkit-transform: scale(1)-opacity: 0.5-}50%{-webkit-transform: scale(1.75)-opacity: 0-}100% {-webkit-transform: scale(0)-opacity: 0-}}

Другий вид прогрес бару

HTML частина

В цьому випадку ми створимо смугу завантаження під будь роздільна здатність екрану. Для потрібен блок з шириною 100%, всередині якого знаходиться смуга завантаження:

123	lt;div id="Content"gt;lt;span class="Expand"gt; lt;/spangt;lt;/divgt;

CSS частина

Код в файлі стилів ще простіше і менше, ніж в попередньому прикладі. Це лише основні стилі і ви можна їх змінити на свій розсуд:

Відео: Створення анімація в Hollpee

1234567891011121314151617181920212223242526

#content {width:100%-height:5px-margin:50px auto-background:# 000-}.fullwidth .expand {width:100%-height:1px-margin:2px 0-background:# 2187e7-position:absolute-box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7)--moz-animation:fullexpand 10s ease-out--webkit-animation:fullexpand 10s ease-out-}@ -moz-keyframes fullexpand {0%{ width:0px-}100%{ width:100%-}}@ -webkit-keyframes fullexpand {0%{ width:0px-}100%{ width:100%-}}

Третій вид прогрес бару

Відео: Анімація при завантаженні сайту Подивившись цей урок, ви навчитеся швидко і легко створювати анімацію для будь-яких елементів вашого сайту. Ви ..

HTML частина

У цьому останній приклад ми створимо анімацію на підставі властивості opacity:

123456789101112

lt;ul id="Loadbar"gt;lt;ligt; lt;div id="LayerFill1" class="Bar"gt; lt;/divgt; lt;/ligt;lt;ligt; lt;div id="LayerFill2" class="Bar"gt; lt;/divgt; lt;/ligt;lt;ligt; lt;div id="LayerFill3" class="Bar"gt; lt;/divgt; lt;/ligt;lt;ligt; lt;div id="LayerFill4" class="Bar"gt; lt;/divgt; lt;/ligt;lt;ligt; lt;div id="LayerFill5" class="Bar"gt; lt;/divgt; lt;/ligt;lt;ligt; lt;div id="LayerFill6" class="Bar"gt; lt;/divgt; lt;/ligt;lt;ligt; lt;div id="LayerFill7" class="Bar"gt; lt;/divgt; lt;/ligt;lt;ligt; lt;div id="LayerFill8" class="Bar"gt; lt;/divgt; lt;/ligt;lt;ligt; lt;div id="LayerFill9" class="Bar"gt; lt;/divgt; lt;/ligt;lt;ligt; lt;div id="LayerFill10" class="Bar"gt; lt;/divgt; lt;/ligt;lt;/ulgt;

CSS частина

Як можете бачити нижче, даний приклад схожий на той, який ми розглядали найпершим, але в якості заповнення в цьому випадку ппрямоугольнікі:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

ul#loadbar {list-style:none-width:140px-margin:0 auto-padding-top:50px-padding-bottom:75px-}ul#loadbar li {float:left-position:relative-width:11px-height:26px-margin-left:1px-border-left:1px solid # 111-border-top:1px solid # 111-border-right:1px solid # 333-border-bottom:1px solid # 333-background:# 000-}ul#loadbar li: First-child { margin-left:0- }.ins .bar {background-color:# 2187e7-background-image: -moz-linear-gradient(45deg, # 2187e7 25%, # a0eaff)-background-image: -webkit-linear-gradient(45deg, # 2187e7 25%, # a0eaff)-width:11px-height:26px-opacity:0--webkit-animation: fill .5s linear forwards--moz-animation: fill .5s linear forwards-}# layerFill1 { -moz-animation-delay:0.5s- -webkit-animation-delay:0.5s- }# layerFill2 { -moz-animation-delay:1s- -webkit-animation-delay:1s- }# layerFill3 { -moz-animation-delay:1.5s- -webkit-animation-delay:1.5s- }# layerFill4 { -moz-animation-delay:2s- -webkit-animation-delay:2s- }# layerFill5 { -moz-animation-delay:2.5s- -webkit-animation-delay:2.5s- }# layerFill6 { -moz-animation-delay:3s- -webkit-animation-delay:3s- }# layerFill7 { -moz-animation-delay:3.5s- -webkit-animation-delay:3.5s- }# layerFill8 { -moz-animation-delay:4s- -webkit-animation-delay:4s- }# layerFill9 { -moz-animation-delay:4.5s- -webkit-animation-delay:4.5s- }# layerFill10 { -moz-animation-delay:5s- -webkit-animation-delay:5s- }@ -moz-keyframes fill {0%{ opacity:0- }100%{ opacity:1- }}@ -webkit-keyframes fill {0%{ opacity:0- }100%{ opacity:1- }}

висновок

У цій статті ми створили прості, але симпатичні прогрес бари. Якщо ви застосовуєте даний спосіб завантаження, то можливо вам знадобляться ці рішення. А працювати анімація повноцінно буде в сучасних браузерах: Mozilla, Safari і Chrome.

Успіхів!

джерело: alessioatzeni.com

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