*,:before,:after {
box-sizing:border-box;
}
html {
height:100%;
background:rgba(0,0,0,0.8);
}
body {
width:600px;
height:100%;
margin:0 auto;
font-family:'microsoft yahei',cursive;
color:#333;
}
a {
text-decoration:none;
}
@keyframes example {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}.score_content {
width:250px;
height:250px;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:99999;
display:block;
}
.score_gray {
width:250px;
height:250px;
background:#e6e6e7;
position:absolute;
border-radius:50%;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
z-index:1;
}
.score_deg {
width:250px;
height:250px;
background:url("http://7xnlea.com2.z0.glb.qiniucdn.com/brabd_reg.png") no-repeat;
position:absolute;
border-radius:50%;
z-index:10;
background-size:250px;
animation:example 1s linear infinite;
-webkit-animation:example 1s linear infinite;
}
.score_white {
width:200px;
height:200px;
position:absolute;
margin:0 auto;
background:#fff;
border-radius:50%;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
z-index:20;
}
.score_text {
font-size:58px;
color:#333333;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
z-index:30;
}
.splash {
width:250px;
height:250px;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:99999;
display:none;
}
.splash>.splash-inner {
display:table-cell;
text-align:center;
vertical-align:middle;
background:#fff;
border-radius:50%;
}
.splash .loading-circle {
position:relative;
width:250px;
height:250px;
margin:auto;
}
.splash .loading-circle>* {
display:block;
position:absolute;
box-sizing:border-box;
border-radius:50%;
width:250px;
height:250px;
}
.splash .loading-circle>canvas.bg {
z-index:1;
width:100%;
height:100%;
border:25px solid #e6e6e7;
}
.splash .loading-circle>canvas.detemask {
z-index:2;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
}
.splash .loading-circle>p {
z-index:3;
width:100%;
height:100%;
text-align:center;
line-height:140px;
font-size:58px;
color:#333;
}
灵感来源于 QQAPP -- 头像 -- 设置 -- 空间清理 。代码写的还有瑕疵,比如从 1-100,应该是先慢后快,我这个就是匀速!望大家批评指正!