圆形进度条是学习

学习网站：http://www.cnblogs.com/jr1993/p/4677921.html

CSS:

   *{
               margin: 0px;
               padding: 0px;

           }
           .box{
               margin: 50px auto 0;
               width: 300px;height: 300px;
               /*border: 1px solid saddlebrown;*/
           }
           .box .boxLeft{
               position: relative;
               width: 150px; height:100%;
               /*border: 1px solid saddlebrown;*/
               float: left;
               overflow: hidden;

           }
           .box .boxRight{
               position: relative;
               width: 150px; height:100%;
               /*border: 1px solid saddlebrown;*/
               float: right;
               overflow: hidden;
           }
           .box .boxRight .boxRightCircl{
               width: 260px; height: 260px;
               border: 20px solid saddlebrown;
               border-radius: 50%;
               position: absolute;
               right: 0px; top: 0px;
               border-left-color: transparent;
               border-bottom-color: transparent;
               /*transform: rotate(45deg);*/
               animation:circleProgressLoad_right 3s linear infinite;/*linear：平局移动；infinite无限次的移动*/
           }
           .box .boxLeft .boxLeftCircl{
               width: 260px; height: 260px;/*这里是减去了边跨的长度的，因为border会影响盒子的长度，300在加border的话这个远就不会于盒子4边相切*/
               border: 20px solid saddlebrown;
               border-radius: 50%;
               position: absolute;
               left: 0px; top: 0px;/*如果不定位就是另外一边就会被hidden所隐藏*/
               border-right-color: transparent;
               border-top-color: transparent;
               /*transform: rotate(45deg);*/
               animation:circleProgressLoad_left 3s linear infinite;
           }
           /*0% 是动画的开始，100% 是动画的完成*/
           @-webkit-keyframes circleProgressLoad_right{
   0%{
   -webkit-transform: rotate(45deg);/*(开始的状态)因为设置边框的原因会有不是垂直的半圆所以要旋转45deg才可以达到半圆的效果*/
   }
   50%,100%{
   -webkit-transform: rotate(225deg);
   }
   /*开始的时候移动了45deg，在0s到1.5s的过程是进行45-225的过程*/
   }
   @-webkit-keyframes circleProgressLoad_left{
   0%,50%{
   -webkit-transform: rotate(45deg);
   }
   100%{
   -webkit-transform: rotate(225deg);
   }
   }
   /*0s-1.5s是进行45deg，然后再1.5-3.0的这个过程进行45-225deg的过程*/
   /********************/
   /*********************/
   /***********反向*************/
   /*@-webkit-keyframes circleProgressLoad_right{
0%{
-webkit-transform: rotate(-135deg);
}
50%,100%{
-webkit-transform: rotate(45deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%,50%{
-webkit-transform: rotate(-135deg);
}
100%{
-webkit-transform: rotate(45deg);
}
}*/

Html：

圆形进度条是学习

猜你喜欢