首先在header.php文件<body>标签下面添加如下代码：
<div class="loading">
<div class="loading1">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="section-left"></div>
<div class="section-right"></div>
</div>
</div>然后把下面的代码保存为load.js放在footer.php文件适当位置。
$(function(){
setTimeout(function(){
var load = document.getElementsByClassName('loading')[0];
load.style.display = 'none';
}, 5000);
$('.loading').css('display' , 'none');
});
把以下css代码保存为load.css放在header.php文件适当位置就可以了。
.loading {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(250,250,250,.1);
}
.loading, .loading1 {
display: true;
}
.loading1 {
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: #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
animation-name: clockwise;
animation-duration:1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
/*safari & Chrome */
-webkit-animation-name:clockwise;
-webkit-animation-duration:1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
}
.loading .block:nth-child(1) {
/* animation-name: anticlockwise; */
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
animation-name: anticlockwise;
animation-duration: 1s;
/* animation-timing-function: linear; */
/* animation-iteration-count: infinite; */
/* animation-direction: normal; */
/* -webkit-animation-name: anticlockwise; */
/* -webkit-animation-duration: 1s; */
/* -webkit-animation-timing-function: linear; */
/* -webkit-animation-iteration-count: infinite; */
/* -webkit-animation-direction: normal; */
}
.block, .frame, .temp {
padding: 0;
margin: 0;
background: 0 0;
border: none;
}
.loading .block:nth-child(2) {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
animation-name: clockwise;
animation-duration:1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
/*safari & Chrome */
-webkit-animation-name:clockwise;
-webkit-animation-duration:3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
}
.block, .frame, .temp {
padding: 0;
margin: 0;
background: 0 0;
border: none;
}
.loading .block:nth-child(3) {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1);
transition: all .7s .3s cubic-bezier(.645, .045, .355, 1);
}
.block, .frame, .temp {
padding: 0;
margin: 0;
background: 0 0;
border: none;
}
.loading .block:nth-child(4) {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1);
transition: all .7s .3s cubic-bezier(.645, .045, .355, 1);
}
.block, .frame, .temp {
padding: 0;
margin: 0;
background: 0 0;
border: none;
}
.block, .frame, .temp {
padding: 0;
margin: 0;
background: 0 0;
border: none;
}
@media (max-width: 640px){
.loading1 {
display: block;
position: relative;
left: 60%;
top: 57%;
width: 80px;
height: 80px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
animation-name: clockwise;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
-webkit-animation-name: clockwise;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
}
}
@keyframes clockwise{
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes clockwise{
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
@keyframes anticlockwise{
from {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}
}
@-webkit-keyframes anticlockwise{
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(-360deg);
}
}
文章版权声明
