詳解用CSS3製作圓形滾動進度條的動畫效果

阿新 • • 發佈：2018-11-10

今天手把手教大家用CSS3製作圓形滾動進度條動畫！

先看一下效果圖，會提升我們的學習興趣喲：

第一種效果：

html結構：

<div id="progress">
    <span></span>
</div>

css樣式：

#progress {
   width: 50%;
   height: 30px;
   border: 1px solid #ccc;
   border-radius: 15px;
   margin: 50px 0 0 100px;
   overflow: hidden;
   box-shadow: 0 0 5px 0px #ddd inset;
}

#progress span {
   display: inline-block;
   width: 100%;
   height: 100%;
   background: #2989d8; /* Old browsers */
   /* linear-gradient() 函式用於建立一個線性漸變的 "影象",也就是漸變背景 */
   background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
   background: -webkit-gradient(linear, left bottom, right top, color-stop(33%, #2989d8), color-stop(34%, #7db9e8), color-stop(59%, #7db9e8), color-stop(60%, #2989d8)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Opera 11.10+ */
   background: -ms-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* IE10+ */
   background: linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2989d8', endColorstr='#2989d8', GradientType=1); /* IE6-9 fallback on horizontal gradient */
   background-size: 60px 30px;
   text-align: center;
   color: #fff;
   -webkit-animation: load 3s ease-in;
}

@-webkit-keyframes load {
   0% {
      width: 0%;
   }

   100% {
      width: 100%;
   }
}

可以看到其實這種進度條的動畫是最容易實現的，根據具體進度百分比設定預設的width百分比和動畫裡100%處的width百分比就行了，比如說，我想實現70%的進度條動畫效果，那麼我只需要修改下一處地方：

@-webkit-keyframes load {
   0% {
      width: 0%;
   }

   100% {
      width: 70%; /* 只要把這個值設定為70%就OK了 */
   }
}

第二種效果：

html結構：

<div id="progressBar">
   <!-- 進度條 -->
   <div>
      <span></span>
   </div>

   <!-- 五個圓 -->
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
</div>

css樣式：

#progressBar {
   width: 80%;
   height: 50px;
   position: relative;
   margin: 50px 0 0 100px;
}

#progressBar div {
   width: 100%;
   height: 10px;
   position: absolute;
   top: 50%;
   left: 0;
   margin-top: -20px;
   background: #ccc;
}

#progressBar div span {
   position: absolute;
   display: inline-block;
   background: green;
   height: 10px;
   width: 100%;
   -webkit-animation: bgLoad 5.5s linear;
}

@-webkit-keyframes bgLoad {
   0% {
      width: 0%;
   }

   18.18%, 27.27% {
      width: 25%;
   }

   45.45%, 54.54% {
      width: 50%;
   }

   72.72%, 81.81% {
      width: 75%;
   }

   100% {
      width: 100%;
   }
}

#progressBar>span {
   position: absolute;
   top: 0;
   margin-top: -10px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #ccc;
   margin-left: -20px;
   color: #fff;
}

@-webkit-keyframes circleLoad_1 {
   0%, 66.66% {
      background: #ccc;
   }

   100% {
      background: green;
   }
}

@-webkit-keyframes circleLoad_2 {
   0%, 83.34% {
      background: #ccc;
   }

   100% {
      background: green;
   }
}

@-webkit-keyframes circleLoad_3 {
   0%, 88.88% {
      background: #ccc;
   }

   100% {
      background: green;
   }
}

@-webkit-keyframes circleLoad_4 {
   0%, 91.67% {
      background: #ccc;
   }

   100% {
      background: green;
   }
}

#progressBar span:nth-child(2) {
   left: 0%;
   background: green;
}

#progressBar span:nth-child(3) {
   left: 25%;
   background: green;
   -webkit-animation: circleLoad_1 1.5s ease-in;
}

#progressBar span:nth-child(4) {
   left: 50%;
   background: green;
   -webkit-animation: circleLoad_2 3s ease-in;
}

#progressBar span:nth-child(5) {
   left: 75%;
   background: green;
   -webkit-animation: circleLoad_3 4.5s ease-in;
}

#progressBar span:nth-child(6) {
   left: 100%;
   background: green;
   -webkit-animation: circleLoad_4 6s ease-in;
}

可以看到，其實對於動畫本身是很簡單的，一看就明白了，主要就是動畫持續時間的計算，由於這個動畫效果只執行一次，所以其實也可以用動畫延遲時間來保證各個動畫在指定的時間點開始執行，但是對於迴圈或者多次動畫效果，延遲很不靈活，所以這裡還是用持續時間的長短來控制動畫的執行時間。

這個訂單進度條，我是設定了走一段用時1秒，然後每到一個圓點就停頓0.5秒，而這0.5秒就是相對應的圓點的動畫持續執行時間。但是再次強調這個是單次動畫，如果想實現迴圈動畫，還是得做調整的，必須讓所有動畫的持續執行時間是一樣的，不然迴圈起來就錯亂的。而時間的改動也會影響動畫關鍵幀的改動，下面對第一小段和第二個圓的動畫時間講解一下：

首先，細長條的動畫持續時間通過計算：

4小段x1秒 + 中間3個圓點 x 0.5秒 = 5.5秒

接下來就是計算細長條動畫關鍵幀的時間分配，設每一份0.5秒，那麼共總就是11份，每小段得2份，每個圓點得1份，用100%除以11，可得每份大約是9.09%，接下來就是分配時間了，這個就簡單了，不多說。

接著，當細長條完成第一小段的動畫效果到達第二個圓點時，會停頓0.5秒，而這0.5秒就是第二個圓點的動畫時間，所以第二個圓點的動畫持續時間就是：

等待細長條執行完1小段 x１秒＋自身的動畫完成時間ｘ０.５秒＝１.５秒

同樣的方法計算每一份的時間然後進行分配。同理，其他動畫效果相似，就不再贅述了。

第三種效果：

今天就重點講解這個效果，首先，當有人說你能不能做一個圓形進度條效果出來時，如果是靜態完整圓形進度條，那麼就很簡單了：

html結構：

<div class='circleprogress'></div>

css樣式：

.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;   /* transparent: 就是透明的意思 */
   border-bottom: 20px solid transparent;
   border-radius: 50%;
}

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

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

html結構：

<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>

css樣式：

.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;
}

這裡重點說一下class=‘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;
}

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

.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);
   border-radius: 50%;
   position: absolute;
   top: 0;
   -webkit-transform: rotate(45deg);
}

.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% {
      border-top: 20px solid #ed1a1a;
      border-right: 20px solid #ed1a1a;
      -webkit-transform: rotate(45deg);
   }

   50% {
      border-top: 20px solid rgb(232, 232, 12);
      border-right: 20px solid rgb(232, 232, 12);
      border-left: 20px solid rgb(81, 197, 81);
      border-bottom: 20px solid rgb(81, 197, 81);
      -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 #ed1a1a;
      border-left: 20px solid #ed1a1a;
      -webkit-transform: rotate(45deg);
   }

   50% {
      border-bottom: 20px solid rgb(232, 232, 12);
      border-left: 20px solid rgb(232, 232, 12);
      border-top: 20px solid rgb(81, 197, 81);
      border-right: 20px solid rgb(81, 197, 81);
      -webkit-transform: rotate(45deg);
   }

   100% {
      border-top: 20px solid green;
      border-right: 20px solid green;
      border-bottom: 20px solid green;
      border-left: 20px solid green;
      -webkit-transform: rotate(225deg);
   }
}

可以看到，其實就是多了一些改變不同邊框顏色的動畫而已，這個就給大家自己去實踐吧！主要還是利用兩個矩形來完成這麼一個圓形進度條效果，特別注意overflow這條規則，起著關鍵作用。

轉載來源：https://www.cnblogs.com/jr1993/p/4677921.html

詳解用CSS3製作圓形滾動進度條的動畫效果

詳解用CSS3製作圓形滾動進度條動畫效果

詳解用CSS3製作圓形滾動進度條的動畫效果

[CSS3學習]用CSS3做一個圓圈等待條動畫效果

圖解CSS3製作圓環形進度條的例項教程

用css3和canvas實現的蜂窩動畫效果

學習用CSS3製作50個超棒動畫效果教程

移動端純CSS3製作圓形進度條所遇到的問題

詳解用Navicat工具將Excel中的數據導入Mysql中

Python-Web框架之 - 利用SQLALchemy創建與數據庫MySQL的連接, 詳解用Flask時會遇到的一些大坑 !

Linux命令詳解-用戶管理

Ant詳解(用Ant實現Java專案的自動構建和部署)

用css3製作一個帶小尖角的氣泡對話方塊

css3帶缺口圓環的步驟條進度條動畫製作

解析：用 CSS3 和 JavaScript 制作徑向動畫菜單

HTML5圓形百分比進度條插件circleChart(記錄)

CSS3實現頁面載入進度條

canvas實現圓形進度條動畫的示例

Android常用控制元件，用執行緒寫一個進度條。

自定義View實現圓形水波進度條

不可思議的純 CSS 滾動進度條效果

詳解用CSS3製作圓形滾動進度條的動畫效果

相關推薦