Ефект анімації завантаження сторінки на чистому 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-}} |
Як бачите не такий вже і складний ефект, тепер завантаження сторінки стала ще цікавіше для відвідувачів.
Успіхів!
джерело: оригінал
З повагою, Бишкин Костянтин
Поділися в соц мережах: