纯css3实现圆形进度条效果

@-webkit-keyframes circleProgressLoad_right{ /*0%{ border-top:20px solid #ED1A1A; border-right:20px solid #ED1A1A; -webkit-transform: rotate(45deg); }*/ 50%{ border-top:20px solid #f3f3f3; border-right:20px solid #f3f3f3; border-left:20px solid r#f3f3f3; border-bottom:20px solid #f3f3f3; -webkit-transform: rotate(225deg); } 100%{ border-left:20px solid green; border-bottom:20px solid green; -webkit-transform: rotate(225deg); } } @-webkit-keyframes circleProgressLoad_left{ 0%{ border-bottom:20px solid #f3f3f3; border-left:20px solid #f3f3f3; -webkit-transform: rotate(45deg); } 50%{ border-bottom:20px solid #f3f3f3; border-left:20px solid #f3f3f3; border-top:20px solid #f3f3f3; border-right:20px solid #f3f3f3; -webkit-transform: rotate(45deg); } 100%{ border-top:20px solid #f3f3f3; border-right:20px solid #f3f3f3; border-bottom:20px solid green; border-left:20px solid green; -webkit-transform: rotate(225deg); } }

在线演示        积分下载        6毛下载        砍两刀下载