Анимация загрузки страницы с помощью CSS
 | |
| Оригинальный по виртуальности эффект анимации при загрузке страницы на сайте, который появляется на время, пока полностью загрузка пройдет. Здесь по дизайн будет 2 круга, точнее как обручи, что против друг друга станут крутится, но также с присутствием двух оттенка цвета, что полностью настраиваются в стилистике CSS. Ранее больше предпочитали GIF-формат, но сейчас на стилях можно выставить намного красивый и смотреться безусловно станет уникально. Вы самостоятельно можете вмешаться в дизайн, это поменять цветовую гамму и сделать диаметр как больше, так и меньше, не говоря, что здесь можно скорость задать изначально. Если говорить о самом preloaders, то больше вам известный как загрузчики, что каждый кто зашел на сайт будет наблюдать. Все зависит от скорости интернет, пока вы смотрите на этот загрузчик, то по сути страница полностью загружается, в то время как он пропадет, то вам откроется полностью загруженная страница, на которую вы перешли. Предварительные загрузчики часто представляют собой как простую, так и сложную анимационную фигуру, которая безусловно используется для того, чтобы посетители или гости развлекались во время обработки на ресурсе. Здесь если время вышло, то появится надпись, что сами можете по тематике написать.  Приступаем к установке: HTML Код <body onload="zarnukdsa()"> <h1>Привет</h1> <div id="Sarnukansuv"> <div></div> </div> </body> JavaScript Код function loader(){ loader = setTimeout(showPage, 36000) } function showPage(){ document.getElementById("Loading").style.display = "none" } CSS Код @charset "utf8"; *,*:after,*:before,html{box-sizing:border-box} body{margin:0;padding:0} h1{ font-family:font-family:Tahoma,Geneva,sans-serif; font-style:normal; font-weight:700; font-size:29px } h1,#Sarnukansuv>div{ top:47%; left:47%; display:block; position:absolute; transform:translate(-47%,-47%) } #Sarnukansuv{ background:#000; width:99%; height:99%; display:block; position:absolute; z-index:999 } #Sarnukansuv>div{width:199px;height:199px} #Sarnukansuv>div:before,#Sarnukansuv>div:after{ content:""; display:block; position:absolute; border-radius:71%; border:4px solid #d2710a; border-top-color:#244298 } #Sarnukansuv>div:before{width:100%;height:100%;animation:zarnukdsa 5s linear infinite} #Sarnukansuv>div:after{ width:148px; height:148px; top:25px; left:25px; animation:zarnukdsa 5s linear infinite reverse } @keyframes zarnukdsa{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} } Все популярнее и больше можно замечать preloaders на разных тематических порталах. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 6 | |
|
| |
