Rumah > Artikel > hujung hadapan web > css3如何实现圆形进度条？css3中圆形进度条的实现

css3如何实现圆形进度条？css3中圆形进度条的实现

不言asal: 2018-10-20 10:34:0011694semak imbas

进度条我们是经常可以看见的，但是进度条怎么来实现呢？我们上一篇文章（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圆形效果如下：

2345截图20181020095226.png

但是圆形的进度条是一个动态的效果，所以就需要考虑很多了，首先我们来看一下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右边半圆的实现效果如下：

2345截图20181020101828.png

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左半圆效果如下：

2345截图20181020102142.png

两个半圆都实现出来了，接下来只需要将两个半圆拼接在一起就可以实现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中圆形进度条效果如下：

2345截图20181020102726.png

本篇文章到这里就全部结束了，更多精彩内容大家可以关注php中文网！！！

Atas ialah kandungan terperinci css3如何实现圆形进度条？css3中圆形进度条的实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php css css3

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何使用纯css实现Material Design中按钮的水滴动画效果Artikel seterusnya：CSS实现富有创意的页面加载（loading）动画效果

Artikel berkaitan

Lihat lagi