CSS3製作圓環進度動畫效果

CSS3製作圓環進度動畫效果

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-radius: 50%;
}

然後就會說，這很簡單嘛。但是如果不是完整圓形的呢？想了想：

.circleprogress{
  width: 160px;
  height: 160px;
  border:20px solid red;
  border-left:20px solid transparent;
  border-bottom:20px solid transparent;
  border-radius: 50%;
}

然後還是會說，這個也不難啦。可是，如果不是剛好都是45度的倍數呢？

OK，我們先設置一個200x200的方塊，然後我們在這裏面完成我們的效果：

.circleProgress_wrapper{
  width: 200px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  border:1px solid #ddd;
}

接下來我將在這個容器裏再放兩個矩形，每個矩形都佔一半：

<div class="circleProgress_wrapper">
        <div class="wrapper right">
            <div class="circleProgress rightcircle"></div>
        </div>
        <div class="wrapper left">
            <div class="circleProgress leftcircle"></div>
        </div>
 </div>

.wrapper{
  width: 100px;
  height: 200px;
  position: absolute;
  top:0;
  overflow: hidden;
}
.right{
  right:0;
}
.left{
  left:0;
}

這裏重點說一下.wrapper 的overflow:hidden; 起着關鍵性作用。這兩個矩形都設置了溢出隱藏，那麼當我們去旋轉矩形裏面的圓形的時候，溢出部分就被隱藏掉了，這樣我們就可以達到我們想要的效果。

從html結構也已看到，在左右矩形裏面還會各自有一個圓形，先講一下右半圓：

.circleProgress{
  width: 160px;
  height: 160px;
  border:20px solid transparent;
  border-radius: 50%;
  position: absolute;
  top:0;
}
.rightcircle{
  border-top:20px solid green;
  border-right:20px solid green;
  right:0;
}

可以看到，效果已經出來了，其實本來是一個半圓弧，但由於我們設置了上邊框和右邊框，所以上邊框有一半溢出而被隱藏了，所以我們可以通過旋轉得以還原：

//code from http://caibaojian.com/css3-round.html
.circleProgress{
  width: 160px;
  height: 160px;
  border:20px solid transparent;
  border-radius: 50%;
  position: absolute;
  top:0;
  -webkit-transform: rotate(45deg);
}

所以只要旋轉自己想要的角度就可以實現任意比例的進度條。接下來把左半圓弧也實現，變成一個全圓：

.leftcircle{
    border-bottom:20px solid green;
    border-left:20px solid green;
    left:0;
}

緊接着，就是讓它動起來，原理是這樣的， 先讓右半圓弧旋轉180度，再讓左半圓弧旋轉180度 ，這樣，兩個半圓弧由於先後都全部溢出而消失了，所以看起來就是進度條再滾動的效果：

    .rightcircle{
  border-top:20px solid green;
  border-right:20px solid green;
  right:0;
  -webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
  border-bottom:20px solid green;
  border-left:20px solid green;
  left:0;
  -webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
  0%{
    -webkit-transform: rotate(45deg);
  }
  50%,100%{
    -webkit-transform: rotate(225deg);
  }
}
@-webkit-keyframes circleProgressLoad_left{
  0%,50%{
    -webkit-transform: rotate(45deg);
  }
  100%{
    -webkit-transform: rotate(225deg);
  }
}

當然，我們只需要調整一下角度就可以實現反向的效果：

    .circleProgress{
  width: 160px;
  height: 160px;
  border:20px solid transparent;
  border-radius: 50%;
  position: absolute;
  top:0;
  -webkit-transform: rotate(-135deg);
}
@-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);
  }
}

好的，接下來就是奔向最終效果了，正如我們一開始看到的那樣，有點像我們使用360衛士清理垃圾時的類似效果，當然不是很像啦：

    .circleProgress_wrapper{
  width: 200px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  border:1px solid #ddd;
}
.wrapper{
  width: 100px;
  height: 200px;
  position: absolute;
  top:0;
  overflow: hidden;
}
.right{
  right:0;
}
.left{
  left:0;
}
.circleProgress{
  width: 160px;
  height: 160px;
  border:20px solid rgb(232, 232, 12);