CSS3 圆形进度条

<html>
<head>
     <title>Sample Page</title>
     <meta charset="UTF-8">
</head>
<style>
     .all{
          width: 400px;
          height: 400px;
          margin: 50px auto;
          position: relative;
          overflow: hidden;
     }
     .all-d{
          width: 200px;
          height: 400px;
          position: absolute;
          top:0;
          overflow: hidden;
     }
     .back{
          width : 396px;
          height :396px;
          border:2px solid #ddd;
          border-radius :50%;
     }
     .right{
          right:0;
     }
     .left{
          left:0;
     }
     .down{
          width: 396px;
          height: 396px;
          border:2px solid transparent;
          border-radius: 50%;
          position: absolute;
          top:0;

     }
     .down-right{
          border-top:2px solid rgb(88,221,172);
          border-right:2px solid rgb(88,221,172);
          transform: rotate(-135deg);
          right:0;
     }
     .down-left{
          border-top:2px solid rgb(88,221,172);
          border-left:2px solid rgb(88,221,172);
          transform: rotate(-225deg);
          left:0;
     }
     .an-right-one{
          animation: animation-right-begin  1s linear forwards ;
     }
     .an-right-two{
          animation: animation-right-last  1s linear forwards ;
     }
     .an-left-one{
          animation: animation-left-begin  1s linear forwards ;
     }
     .an-left-two{
          animation: animation-left-last  1s linear forwards ;
     }
     @keyframes animation-right-begin{
          0%{transform: rotate(-135deg);}
          100%{transform: rotate(-45deg);}
     }
     @keyframes animation-right-last{
          0%{transform: rotate(-45deg);}
          100%{transform: rotate(45deg);}
     }
     @keyframes animation-left-begin{
          0%{transform: rotate(-225deg);}
          100%{transform: rotate(-135deg);}
     }
     @keyframes animation-left-last{
          0%{transform: rotate(-135deg);}
          100%{transform: rotate(-45deg);}
     }
</style>
<body>
<div class='all'>
     <div class='back'>
          <div class="all-d right"><div class="down down-right" id='right'></div></div><div class="all-d left"><div class="down down-left" id='left'></div></div>
     </div>
</div>
<input type='button' onclick='addClass()' value='下一步'>
</body>
</html>
<script>
var judge = 1;
function addClass(){
if(judge==1){
  document.getElementById('right').className+=' an-right-one';
}
if(judge==2){
  document.getElementById('right').className+=' an-right-two';
}
if(judge==3){
  document.getElementById('left').className+=' an-left-one';
}
if(judge==4){
  document.getElementById('left').className+=' an-left-two';
}
judge++;
}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值