*,: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,应该是先慢后快,我这个就是匀速!望大家批评指正!