如何使用CSS實現圓形進度條

這篇文章主要介紹了如何使用CSS實現圓形進度條，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　首先一個父級div設置相對定位，內部含有四個半圓div和一個用于遮罩的小圓div

　　實現步驟

　　先寫出基本html結構

　　<div class="box">

　　<div class="bg1"></div>

　　<div class="bg2"></div>

　　<div class="pr1"></div>

　　<div class="pr2"></div>

　　<div class="content"></div>

　　</div>

　　父級div和content添加樣式

　　.box{

　　position: relative;

　　}

　　.content {

　　top: 10px;

　　left: 10px;

　　width: 100px;

　　height: 100px;

　　border-radius: 50%;

　　position: absolute;

　　background:red;

　　z-index: 5;

　　}

　　當前效果：

　　添加第一個背景半圓

　　.bg1{

　　position: absolute;

　　width: 60px;

　　height: 120px;

　　border-radius: 120px 0 0 120px;

　　z-index: 3;

　　background: sandybrown;

　　}

　　添加第二個背景半圓

　　.bg2{

　　left: 60px;

　　position: absolute;

　　width: 60px;

　　height: 120px;

　　border-radius: 0px 120px 120px 0;

　　z-index: 1;

　　background: sandybrown;

　　}

　　添加第一個進度半圓，這個時候，去頁面調整rotate的角度可以看到進度旋轉

　　.pr1 {

　　position: absolute;

　　left: 60px;

　　width: 60px;

　　height: 120px;

　　border-radius: 0px 120px 120px 0px;

　　z-index: 2;

　　background: forestgreen;

　　transform: rotate(-180deg);

　　transform-origin: 0px 60px;

　　}

　　添加第二個半圓，第一個半圓只能旋轉到50%，所以需要第二個半圓來走完剩下的一半

　　.pr2 {

　　position: absolute;

　　left: 60px;

　　border-radius: 0px 120px 120px 0px;

　　z-index: 4;

　　background: forestgreen;

　　transform: rotate(-180deg);

　　transform-origin: 0px 60px;

　　}

　　添加動畫函數，在分別把動畫函數添加到.pr1和.pr2中，在實際需求中可以用js控制連個進度半圓的旋轉角度

　　.pr1 {

　　...

　　animation: pr1A 5s infinite linear forwards;

　　}

　　.pr2 {

　　...

　　animation: pr2A 5s infinite linear forwards;

　　}

　　@keyframes pr1A {

　　0% {

　　transform: rotate(-180deg);

　　}

　　50% {

　　transform: rotate(0deg);

　　}

　　100% {

　　transform: rotate(0deg);

　　}

　　}

　　@keyframes pr2A {

　　0% {

　　transform: rotate(-180deg);

　　}

　　100%{

　　width: 60px;

　　height: 120px;

　　transform: rotate(180deg);

　　}

　　}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用CSS實現圓形進度條”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!