css3如何实现圆形进度条?css3中圆形进度条的实现
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css3如何实现圆形进度条?css3中圆形进度条的实现,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4139字,纯文字阅读大概需要6分钟。
内容图文
进度条我们是经常可以看见的,但是进度条怎么来实现呢?我们上一篇文章(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圆形效果如下:
但是圆形的进度条是一个动态的效果,所以就需要考虑很多了,首先我们来看一下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左半圆实现和右半圆正好相反,代码如下:
.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实现圆形进度条代码如下:
<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中圆形进度条效果如下:
本篇文章到这里就全部结束了,更多精彩内容大家可以关注Gxlcms!!!
以上就是css3如何实现圆形进度条?css3中圆形进度条的实现的详细内容。
内容总结
以上是互联网集市为您收集整理的css3如何实现圆形进度条?css3中圆形进度条的实现全部内容,希望文章能够帮你解决css3如何实现圆形进度条?css3中圆形进度条的实现所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。