网页载入动画 php,网站页面加载动画代码
有時(shí)候網(wǎng)站服務(wù)器帶寬不好或者用戶網(wǎng)絡(luò)不好，網(wǎng)站速度打開就會(huì)比較慢，那么用戶等待就會(huì)比較無聊，下面準(zhǔn)備了一個(gè)loading頁面，可以在網(wǎng)站文件未完全加載完畢之前展示。
HTML部分，放在body標(biāo)簽下面(最好是最靠近body)
正在加載中，請稍后JS部分，放在body標(biāo)簽結(jié)束之前
document.body.className?+=?'loaded';
}
CSS部分，最好寫入到一個(gè)單獨(dú)的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é)束自動(dòng)消失 */
.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
}
展示效果如下，中間是一個(gè)轉(zhuǎn)圈圈的動(dòng)畫
總結(jié)
以上是生活随笔為你收集整理的网页载入动画 php,网站页面加载动画代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 唯有自己变得强大_真正的自立，唯是让自己
- 下一篇： java的mybatis批量更新_myb