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

本篇文章到这里就全部结束了,更多精彩内容大家可以关注5G云资源分享网!!!

标签
DT素材网

DT素材网

164

0

0

( 此人很懒并没有留下什么~~ )