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

宜家博客
宜家博客
宜家博客
47420
文章
0
评论
2020年6月30日21:20:20 评论 5 3278字阅读10分55秒

进度条我们是经常可以看见的,但是进度条怎么来实现呢?我们上一篇文章(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中圆形进度条的实现

本篇文章到这里就全部结束了,更多精彩内容大家可以关注css教程!!!

以上就是css3如何实现圆形进度条?css3中圆形进度条的实现的详细内容,更多请关注css教程其它相关文章!

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
宜家博客
图文详解怎么去除HTML超链接的下划线 css教程

图文详解怎么去除HTML超链接的下划线

在页面布局时,经常会用到a标签,大家都知道a标签默认有下划线,而且颜色也有所不同,有时为了页面的美观,需要去除部分超链接的下划线,或者改变超链接的颜色,你知道怎么实现这个效果吗?这篇文章就和大家讲讲如...
如何用Windows自带画图工具吸取色值 html教程

如何用Windows自带画图工具吸取色值

1、打开画图windows自带画图软件 2、用qq截图要吸取颜色的图片,ctrl+v粘贴到画图软件中 3、点击取色器,吸取颜色,这是会看到吸取成功的颜色 4、打开编辑颜色 5、这样就得到了RGB颜色 ...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: