标签：stat auto mobile bar 圆点 for max charset 源码
源码如下 没有什么好解释的 博主只测试了手机端
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<head>
<style>
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;}
</style>
</head>
<body>
<div class="ts_load">
<div class="last_center">
<div id="div1" class="div_load"></div>
<div id="div2" class="div_load"></div>
<div id="div3" class="div_load"></div>
<div id="div4" class="div_load"></div>
<p class="load_ts">请稍等...</p>
</div>
</div>
</body>
</html>
标签：stat auto mobile bar 圆点 for max charset 源码
原文地址：http://www.cnblogs.com/xiana/p/6545343.html
