作者:小太郎在路上_439 | 来源:互联网 | 2020-08-09 11:50
进度条我们是经常可以看见的,但是进度条怎么来实现呢?我们上一篇文章(css3如何实现进度条?css3中进度条的实现方法介绍)中已经简单的说过了css3实现长形进度条的方法,今天的这篇文章就给大家来介绍一下css3圆形进度条的实现方法,有感兴趣的小伙伴可以看一看。
我们都知道做出一个静态的圆环形是很简单的,像下面这样就可以了
css3圆形效果如下:
但是圆形的进度条是一个动态的效果,所以就需要考虑很多了,首先我们来看一下css圆形进度条的实现思路:
我们可以把整个圆环分成左右两部分;左右两个半圆都旋转,比如先让右边半圆旋转再接上左边半圆然后左边半圆旋转,这样就可以实现了整个圆环的旋转,就是一个圆形进度条了。
下面我们就来看看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;
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左半圆实现和右半圆正好相反,代码如下:
.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实现圆形进度条代码如下:
.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中圆形进度条效果如下:
本篇文章到这里就全部结束了,更多精彩内容大家可以关注 第一PHP社区 !!!
以上就是css3如何实现圆形进度条?css3中圆形进度条的实现的详细内容,更多请关注 第一PHP社区 其它相关文章!