demo地址:

https://lyf521.github.io/docs/blog/animation/cssCircle.html

采用定位, 左右各一个半圆, css的 动画属性,和 2D旋转 transform: rotate(45deg)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>使用CSS3实现圆形进度条</title>
  8.   <style>
  9.   .circle_process{
  10.     position: relative;
  11.     width: 199px;
  12.     height: 200px;
  13.   }
  14.   .circle_process .wrapper{
  15.     width: 100px;
  16.     height: 200px;
  17.     position: absolute;
  18.     top: 0;
  19.     overflow: hidden;
  20.   }
  21.   .circle_process .right{
  22.     right: 0;
  23.   }
  24.   .circle_process .left{
  25.     left: 0;
  26.   }
  27.   .circle_process .circle{
  28.     width: 160px;
  29.     height: 160px;
  30.     border: 20px solid transparent;
  31.     border-radius: 50%;
  32.     position: absolute;
  33.     top: 0;
  34.     transform: rotate(-135deg);
  35.   }
  37.   .circle_process .rightcircle{
  38.     border-top: 20px solid red;
  39.     border-right: 20px solid red;
  40.     right: 0;
  41.     -webkit-animation: circle_right 5s linear infinite;
  42.   }
  43.   .circle_process .leftcircle{
  44.     border-bottom: 20px solid red;
  45.     border-left: 20px solid red;
  46.     left: 0;
  47.     opacity: 0;
  48.     -webkit-animation: circle_left 5s linear infinite;
  49.   }
  51.   .circle_process .show{
  52.     width: 200px;
  53.     height: 200px;
  54.     font-size: 30px;
  55.     position: absolute;
  56.     left: 0;
  57.     top: 0;
  58.     text-align: center;
  59.     line-height: 200px;
  60.   }
  61.   .circle_process #rightcircle{
  62.     border-top: 20px solid red;
  63.     border-right: 20px solid red;
  64.     right: 0;
  65.     /* -webkit-animation: circle_right 5s linear infinite; */
  66.   }
  67.   .circle_process #leftcircle{
  68.     border-bottom: 20px solid red;
  69.     border-left: 20px solid red;
  70.     left: 0;
  71.     opacity: 0;
  72.     /* -webkit-animation: circle_left 5s linear infinite; */
  73.   }
  74.   @-webkit-keyframes circle_right{
  75.     0%{
  76.       -webkit-transform: rotate(-135deg);
  77.     }
  78.     50%,100%{
  79.       -webkit-transform: rotate(45deg);
  80.     }
  81.   }
  82.   @-webkit-keyframes circle_left{
  83.     0%,49%{
  84.       opacity: 0;
  85.     }
  86.     50%{
  87.       opacity: 1;
  88.       -webkit-transform: rotate(-135deg);
  89.     }
  90.     100%{
  91.       opacity: 1;
  92.       -webkit-transform: rotate(45deg);
  93.     }
  94.   }
  95.   </style>
  96. </head>
  97. <body>
  98.   <div class="circle_process">
  99.     <div class="wrapper right">
  100.       <div class="circle rightcircle"></div>
  101.     </div>
  102.     <div class="wrapper left">
  103.       <div class="circle leftcircle"></div>
  104.     </div>
  105.   </div>
  106.   <div class="circle_process">
  107.     <div class="show" id="show"></div>
  108.     <div class="wrapper right">
  109.       <div class="circle" id="rightcircle"></div>
  110.     </div>
  111.     <div class="wrapper left">
  112.       <div class="circle" id="leftcircle"></div>
  113.     </div>
  114.   </div>
  115. </body>
  116. <script>
  117.   var rightcircle = document.getElementById('rightcircle')
  118.   var leftcircle = document.getElementById('leftcircle')
  119.   var show = document.getElementById('show')
  120.   function getTime() {
  121.     var data = new Date()
  122.     var second = data.getSeconds()
  124.     show.innerHTML = second
  126.     if (second <= 30) {
  127.       rightcircle.style.cssText = 'transform: rotate(' + (-135+6*second) + 'deg)'
  128.       leftcircle.style.cssText = 'transform: rotate(-135deg)'
  129.     } else {
  130.       rightcircle.style.cssText = 'transform: rotate(45deg)'
  131.       leftcircle.style.cssText = 'transform: rotate(' + (-135+6*(second-30)) + 'deg);opacity:1'
  132.     }
  133.   }
  135.   getTime();
  136.   setInterval(function(){
  137.     getTime()
  138.   }, 1000)
  139. </script>
  140. </html>