有時候網(wǎng)站服務(wù)器帶寬不好或者用戶網(wǎng)絡(luò)不好，網(wǎng)站速度打開就會比較慢，那么用戶等待就會比較無聊，下面準(zhǔn)備了一個loading頁面，可以在網(wǎng)站文件未完全加載完畢之前展示。

HTML部分，放在body標(biāo)簽下面(最好是最靠近body)

正在加載中，請稍后

JS部分，放在body標(biāo)簽結(jié)束之前

document.body.className?+=?'loaded';

}

CSS部分，最好寫入到一個單獨的css文件，然后在網(wǎng)頁的head內(nèi)引入。

.chromeframe {

margin: .2em 0;

background: #ccc;

color: #000;

padding: .2em 0

}

#loader-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 999999

}

#loader {

display: block;

position: relative;

left: 50%;

top: 50%;

width: 150px;

height: 150px;

margin: -75px 0 0 -75px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #FFF;

-webkit-animation: spin 2s linear infinite;

-ms-animation: spin 2s linear infinite;

-moz-animation: spin 2s linear infinite;

-o-animation: spin 2s linear infinite;

animation: spin 2s linear infinite;

z-index: 1001

}

#loader:before {

content: "";

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #FFF;

-webkit-animation: spin 3s linear infinite;

-moz-animation: spin 3s linear infinite;

-o-animation: spin 3s linear infinite;

-ms-animation: spin 3s linear infinite;

animation: spin 3s linear infinite

}

#loader:after {

content: "";

position: absolute;

top: 15px;

left: 15px;

right: 15px;

bottom: 15px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #FFF;

-moz-animation: spin 1.5s linear infinite;

-o-animation: spin 1.5s linear infinite;

-ms-animation: spin 1.5s linear infinite;

-webkit-animation: spin 1.5s linear infinite;

animation: spin 1.5s linear infinite

}

@-webkit-keyframes spin {

0% {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg)

}

100% {

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg)

}

}

@keyframes spin {

0% {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg)

}

100% {

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg)

}

}

#loader-wrapper .loader-section {

position: fixed;

top: 0;

width: 51%;

height: 100%;

background: #1abc9c;/*背景色 原#1abc9c */

z-index: 1000;

-webkit-transform: translateX(0);

-ms-transform: translateX(0);

transform: translateX(0)

}

#loader-wrapper .loader-section.section-left {

left: 0

}

#loader-wrapper .loader-section.section-right {

right: 0

}

.loaded #loader-wrapper .loader-section.section-left {

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

-webkit-transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);

transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)

}

.loaded #loader-wrapper .loader-section.section-right {

-webkit-transform: translateX(100%);

-ms-transform: translateX(100%);

transform: translateX(100%);

-webkit-transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);

transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)

}

.loaded #loader {

opacity: 0;

-webkit-transition: all .3s ease-out;

transition: all .3s ease-out

}

/* 原版load_title是從上面飄出去，感覺太二了注銷掉了，結(jié)束自動消失 */

.loaded #loader-wrapper {

visibility: hidden;

/*-webkit-transform: translateY(-100%);*/

/*-ms-transform: translateY(-100%);*/

/*transform: translateY(-100%);*/

/*-webkit-transition: all .3s 1s ease-out;*/

/*transition: all .3s 1s ease-out*/

}

.no-js #loader-wrapper {

display: none

}

.no-js h1 {

color: #222

}

#loader-wrapper #load_title {

font-family: 'Open Sans';

color: #FFF;

font-size: 19px;

width: 100%;

text-align: center;

z-index: 9999999999999;

position: absolute;

top: 60%;

opacity: 1;

line-height: 30px

}

#loader-wrapper #load_title span {

font-weight: normal;

font-style: italic;

font-size: 13px;

color: #FFF;

opacity: .5

}

展示效果如下，中間是一個轉(zhuǎn)圈圈的動畫

總結(jié)

以上是生活随笔為你收集整理的网页载入动画 php,网站页面加载动画代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。