上面的loading条，想到的办法是用两个半圆覆盖实现，结果也就这么做了，可是明明一个圆就可以的，哎智商堪忧...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
margin: 100px auto;
width: 664px;
height: 664px;
}
.circle-wrap{
position: relative;/* 相对定位 */
width: 664px;
height: 329px;/* 1/2高 */
overflow: hidden;
}
.circle-con{
position: absolute;/* 绝对定位 */
width: 658px;
height: 658px;
border-width: 3px;
border-style: solid;
border-radius: 50%;
border-color: #ed506c #ed506c #87c1ff #87c1ff;
transform: rotate(135deg);
transition: 1s;
}
.pan-bg{
margin: -300px auto;
width: 601px;
height: 326px;
background: url(./pan_bg.png) no-repeat;
}
.pan-txt{
margin-top: 60px;
text-align: center;
}
.pt-top{
font-size: 168px;
color: #ed506c;
font-weight: bold;
}
.pt-cen{
margin-top: -20px;
font-size: 68px;
color: #ed506c;
}
.pt-bot{
font-size: 27px;
color: #9ecdff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="circle-wrap">
<div class="circle-con"></div>
</div>
<div class="pan-bg"></div>
<div class="pan-txt">
<p class="pt-top">646</p>
<p class="pt-cen">财商优秀</p>
<p class="pt-bot">评估时间：2016.05.12</p>
</div>
</div>
</body>
</html>