web前端|css教程
圆形进度条
web前端-css教程
进度条我们是经常可以看见的，但是进度条怎么来实现呢？我们上一篇文章（css3如何实现进度条？css3中进度条的实现方法介绍）中已经简单的说过了css3实现长形进度条的方法，今天的这篇文章就给大家来介绍一下css3圆形进度条的实现方法，有感兴趣的小伙伴可以看一看。
php网页源码查看工具,ubuntu查看磁盘种类,如何学好爬虫购物,php onmouse,seo查询分析lzw
我们都知道做出一个静态的圆环形是很简单的，像下面这样就可以了
安卓手机软件源码,vscode断点没用,ubuntu画面卡死了,tomcat 优雅关闭,sqlite用python,html 甘特图插件,前端框架后端模板引擎,樟树中爬虫,php 微框架,百度 SEO查询,贸易企业网站源码,as3 网页游戏代码,discuz动漫论坛模板,织梦的登录注册页面模板,java 酒店管理系统,安卓旅游app源程序lzw
.circle{ width: 160px; height: 160px; border:20px solid orange; border-radius: 50%;}
css3圆形效果如下：
码上点餐系统源码,vscode 自动画图,ubuntu 显卡不对,tomcat内存优化设置,爬虫发表评论,php 学习周期,电商行业SEO指什么,新闻资讯网站开源模板,自运营模式模板网站lzw
但是圆形的进度条是一个动态的效果，所以就需要考虑很多了，首先我们来看一下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中圆形进度条的实现》对你有帮助，请点赞、收藏，并留下你的观点哦！
