Html
    Css
    Js

    
                        
*,: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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3loading动画

灵感来源于 QQAPP -- 头像 -- 设置 -- 空间清理 。代码写的还有瑕疵,比如从 1-100,应该是先慢后快,我这个就是匀速!望大家批评指正!

0