css3如何實現圓形進度條？ css3中圓形進度條的實現-css教學-PHP中文網

首頁

web前端

css教學

css3如何實現圓形進度條？ css3中圓形進度條的實現

不言

Oct 20, 2018 am 10:34 AM

進度條我們是常常可以看見的，但是進度條要怎麼實現呢？我們上一篇文章（css3如何實現進度條？css3中進度條的實現方法介紹）中已經簡單的說過了css3實現長形進度條的方法，今天的這篇文章就給大家來介紹一下css3圓形進度條的實作方法，有興趣的夥伴可以看看。

我們都知道做出一個靜態的圓環形是很簡單的，像下面這樣就可以了

<!DOCTYPE html>
<html>
<head>
<style> 
.circle{
    width: 160px;
    height: 160px;
    border:20px solid orange;
    border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

登入後複製

css3圓形效果如下：

css3如何實現圓形進度條？ css3中圓形進度條的實現

但是圓形的進度條是一個動態的效果，所以就需要考慮很多了，首先我們來看一下css圓形進度條的實現思路：

我們可以把整個圓環分成左右兩部分；左右兩個半圓都旋轉，比如先讓右邊半圓旋轉再接上左邊半圓然後左邊半圓旋轉，這樣就可以實現了整個圓環的旋轉，就是一個圓形進度條了。

下面我們就來看看css3圓形進度條具體的實作方法。

首先我們來看css3右邊半圓的實作

<div class="right">
    <div class="rightcircle"></div>
</div>

登入後複製

.right{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.rightcircle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    right: 0;
    border-top:20px solid lightblue;
    border-right:20px solid lightblue;
    -webkit-transform : rotate(45deg);
    -moz-transform : rotate(45deg);
    -o-transform : rotate(45deg);
    transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
    -webkit-animation-name: circle_right; /* 动画名称 */
    -webkit-animation-duration: 5s;  /* 完成一个动画需要的时间 */
    -webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
    -webkit-animation-iteration-count: infinite;  /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
    0%{
        transform : rotate(-135deg);
    }
    100%{
        transform : rotate(45deg);
    }
}

登入後複製

css3右邊半圓的實作效果如下：

css3如何實現圓形進度條？ css3中圓形進度條的實現

css3左半圓實作和右半圓剛好相反，程式碼如下：

.right{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.rightcircle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    bottom:0;
    left: 0;
    border-bottom:20px solid lightblue;
    border-left:20px solid lightblue;
    -webkit-transform : rotate(45deg);
    -moz-transform : rotate(45deg);
    -o-transform : rotate(45deg);
    transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
    -webkit-animation-name: circle_right; /* 动画名称 */
    -webkit-animation-duration: 5s;  /* 完成一个动画需要的时间 */
    -webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
    -webkit-animation-iteration-count: infinite;  /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
    0%{
        transform : rotate(-135deg);
    }
    100%{
        transform : rotate(45deg);
    }
}

登入後複製

css3左半圓效果如下：

css3如何實現圓形進度條？ css3中圓形進度條的實現

兩個半圓都實作出來了，接下來只需要將兩個半圓拼接在一起就可以實現css3圓形進度條的效果了

css3實現圓形進度條代碼如下：

<div class="circle_process">
    <div class="wrapper right">
        <div class="circle rightcircle"></div>
    </div>
    <div class="wrapper left">
        <div class="circle leftcircle" id="leftcircle"></div>
    </div>
</div>

登入後複製

 .circle_process{
        position: relative;
        width: 199px;
        height : 200px;
    }
    .circle_process .wrapper{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden;
    }
    .circle_process .right{
        right:0;
    }
    .circle_process .left{
        left:0;
    }
    .circle_process .circle{
        width: 160px;
        height: 160px;
        border:20px solid transparent;
        border-radius: 50%;
        position: absolute;
        top:0;
        transform : rotate(-135deg);
    }
    .circle_process .rightcircle{
        border-top:20px solid lightblue;
        border-right:20px solid lightblue;
        right:0;
        -webkit-animation: circle_right 5s linear infinite;
    }
    .circle_process .leftcircle{
        border-bottom:20px solid lightblue;
        border-left:20px solid lightblue;
        left:0;
        -webkit-animation: circle_left 5s linear infinite;
    }
    @-webkit-keyframes circle_right{
        0%{
            -webkit-transform: rotate(-135deg);
        }
        50%,100%{
            -webkit-transform: rotate(45deg);
        }
    }
    @-webkit-keyframes circle_left{
        0%,50%{
            -webkit-transform: rotate(-135deg);
        }
        100%{
            -webkit-transform: rotate(45deg);
        }
    }

登入後複製

css3中圓形進度條效果如下：

css3如何實現圓形進度條？ css3中圓形進度條的實現