Ефект анімації завантаження сторінки на чистому css

Ефект анімації завантажити цю сторінку на чистій css

Всім привіт! Сьогодні ми розглянемо ще один класний приклад анімації завантажити цю сторінку. У деяких Web сайтів завантаження сторінки триває довго і відвідувач не чекаючи довгоочікуваного контенту залишає сайт. Хорошим відволікаючим ефектом є анімація, вона ж і надає якусь красу для сайту.

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

Схожі статті на цю тему:

  • Ефект завантаження сторінки - створення ефекту при завантаженні сторінки
  • Ефекти завантаження сторінки

HTML

Створюємо що складається з 3-х внутрішніх які відповідають за відображення ефекту завантаження сторінки.

HTML КОД

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

12345


lt;div class="Loading-wrap"gt;lt;div class="Triangle1"gt; lt;/divgt;lt;div class="Triangle2"gt; lt;/divgt;lt;div class="Triangle3"gt; lt;/divgt;lt;/divgt;

CSS

Даний код вбудований в саму Web сторінку

Відео: Простий Parallax ефект на чистому CSS

CSS КОД
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
body{background: # 555-}.loading-wrap {width: 60px-height: 60px-position: absolute-top: 50%-left: 50%-margin: -30px 0 0 -30px-background: # 777--moz-animation: rotation ease-in-out 2s infinite--webkit-animation: rotation ease-in-out 2s infinite--ms-animation: rotation ease-in-out 2s infinite-animation: rotation ease-in-out 2s infinite--webkit-border-radius: 30px--moz-border-radius: 30px-border-radius: 30px-}.triangle1, .triangle2, .triangle3 {border-width: 0 20px 30px 20px-border-style: solid-border-color: transparent-border-bottom-color: # 67cbf0-height: 0- width: 0-position: absolute-left: 10px-top: -10px--moz-animation: fadecolor 2s 1s infinite--webkit-animation: fadecolor 2s 1s infinite--ms-animation: fadecolor 2s 1s infinite-animation: fadecolor 2s 1s infinite-}.triangle2, .triangle3 {content: ``-top: 20px-left: 30px--moz-animation-delay: 1.1s--webkit-animation-delay: 1.1s--ms-animation-delay: 1.1s-animation-delay: 1.1s-}.triangle3 {left: -10px--moz-animation-delay: 1.2s--webkit-animation-delay: 1.2s--ms-animation-delay: 1.2s-animation-delay: 1.2s-}@ -moz-keyframes rotation {0% {-moz-transform: rotate(0deg)-}20% {-moz-transform: rotate(360deg)-}100% {-moz-transform: rotate(360deg)-}}@ -webkit-keyframes rotation {	0% {-webkit-transform: rotate(0deg)-}20% {-webkit-transform: rotate(360deg)-}100% {-webkit-transform: rotate(360deg)-}}@ -ms-keyframes rotation {0% {-webkit-transform: rotate(0deg)-}20% {-webkit-transform: rotate(360deg)-}100% {-webkit-transform: rotate(360deg)-}}@keyframes rotation {0% {transform: rotate(0deg)-}20% {transform: rotate(360deg)-}100% {transform: rotate(360deg)-}}@ -moz-keyframes fadecolor {	0% {border-bottom-color: #eee-}100%{border-bottom-color: # 67cbf0-}}@ -webkit-keyframes fadecolor {0% {border-bottom-color: #eee-}100%{border-bottom-color: # 67cbf0-}}@ -ms-keyframes fadecolor {0% {border-bottom-color: #eee-}100% {border-bottom-color: # 67cbf0-}}@keyframes fadecolor {0% {border-bottom-color: #eee-}100%{border-bottom-color: # 67cbf0-}}

Як бачите не такий вже і складний ефект, тепер завантаження сторінки стала ще цікавіше для відвідувачів.

Успіхів!

джерело: оригінал

З повагою, Бишкин Костянтин

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

Увага, тільки СЬОГОДНІ!