源码如下 没有什么好解释的 博主只测试了手机端
body{
width: 100%;s
margin: 0 auto;
height: 3000px;
}
.div_load
{
width:15px;
height:15px;
float: ;
position:fixed;
bottom: 52%;
border-radius: 8px;
animation:loading 5s infinite;
-webkit-animation:loading 5s infinite;
}
#div1 {
animation-timing-function:ease;
animation-delay:0s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0s;
background:#18bc9a;}
#div2 {
animation-delay:0.22s;
animation-timing-function:ease;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0.22s;
background:#58d68d}
#div3 {
animation-timing-function:ease;
animation-delay:0.44s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0.44s;
background:#3398dc;}
#div4 {
animation-timing-function:ease;
animation-delay:0.66s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0.66s;
background:#9b58b7;}
@keyframes loading
{
from {left:25%;}
to {left:75%;}
}
@-webkit-keyframes loading /* Safari and Chrome */
{
from {left:25%;}
to {left:75%;}
}
.ts_load{
display: block;
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
background: rgba(0,0,0,0.3);
bottom: 0;top: 0;left: 0;right: 0;
}
.last_center{
position: absolute;
margin: auto;
}
.load_ts{
display: block;
position: fixed;
text-align: center;
bottom: 46%;
font-size: 16px;
font-family: 微软雅黑;
width: 100%;
color: #ffffff;}
请稍等...