图解CSS3制作圆环形进度条的实例教程


Posted in HTML / CSS onMay 26, 2016

首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了:

CSS Code复制内容到剪贴板
  1. .circleprogress{   
  2.     width160px;   
  3.     height160px;   
  4.     border:20px solid red;   
  5.     border-radius: 50%;   
  6. }  

图解CSS3制作圆环形进度条的实例教程

然后就会说,这很简单嘛。但是如果不是完整圆形的呢?想了想:

CSS Code复制内容到剪贴板
  1. .circleprogress{   
  2.   width160px;   
  3.   height160px;   
  4.   border:20px solid red;   
  5.   border-left:20px solid transparent;   
  6.   border-bottom:20px solid transparent;   
  7.   border-radius: 50%;   
  8. }  

图解CSS3制作圆环形进度条的实例教程

然后还是会说,这个也不难啦。可是,如果不是刚好都是45度的倍数呢?

OK,我们先设置一个200x200的方块,然后我们在这里面完成我们的效果:

CSS Code复制内容到剪贴板
  1. .circleProgress_wrapper{   
  2.   width200px;   
  3.   height200px;   
  4.   margin50px auto;   
  5.   positionrelative;   
  6.   border:1px solid #ddd;   
  7. }  

图解CSS3制作圆环形进度条的实例教程

接下来我将在这个容器里再放两个矩形,每个矩形都占一半:

XML/HTML Code复制内容到剪贴板
  1. <div class="circleProgress_wrapper">  
  2.         <div class="wrapper right">  
  3.             <div class="circleProgress rightcircle"></div>  
  4.         </div>  
  5.         <div class="wrapper left">  
  6.             <div class="circleProgress leftcircle"></div>  
  7.         </div>  
  8.  </div>  
CSS Code复制内容到剪贴板
  1. .wrapper{   
  2.   width100px;   
  3.   height200px;   
  4.   positionabsolute;   
  5.   top:0;   
  6.   overflowhidden;   
  7. }   
  8. .rightright{   
  9.   rightright:0;   
  10. }   
  11. .left{   
  12.   left:0;   
  13. }  

图解CSS3制作圆环形进度条的实例教程

这里重点说一下.wrapper 的overflow:hidden; 起着关键性作用。这两个矩形都设置了溢出隐藏,那么当我们去旋转矩形里面的圆形的时候,溢出部分就被隐藏掉了,这样我们就可以达到我们想要的效果。

从html结构也已看到,在左右矩形里面还会各自有一个圆形,先讲一下右半圆:

CSS Code复制内容到剪贴板
  1. .circleProgress{   
  2.   width160px;   
  3.   height160px;   
  4.   border:20px solid transparent;   
  5.   border-radius: 50%;   
  6.   positionabsolute;   
  7.   top:0;   
  8. }   
  9. .rightcircle{   
  10.   border-top:20px solid green;   
  11.   border-right:20px solid green;   
  12.   rightright:0;   
  13. }  

图解CSS3制作圆环形进度条的实例教程

可以看到,效果已经出来了,其实本来是一个半圆弧,但由于我们设置了上边框和右边框,所以上边框有一半溢出而被隐藏了,所以我们可以通过旋转得以还原:

CSS Code复制内容到剪贴板
  1. .circleProgress{   
  2.   width160px;   
  3.   height160px;   
  4.   border:20px solid transparent;   
  5.   border-radius: 50%;   
  6.   positionabsolute;   
  7.   top:0;   
  8.   -webkit-transform: rotate(45deg);   
  9. }  

图解CSS3制作圆环形进度条的实例教程

所以只要旋转自己想要的角度就可以实现任意比例的进度条。接下来把左半圆弧也实现,变成一个全圆:

CSS Code复制内容到剪贴板
  1. .leftcircle{   
  2.     border-bottom:20px solid green;   
  3.     border-left:20px solid green;   
  4.     left:0;   
  5. }  

图解CSS3制作圆环形进度条的实例教程

紧接着,就是让它动起来,原理是这样的, 先让右半圆弧旋转180度,再让左半圆弧旋转180度 ,这样,两个半圆弧由于先后都全部溢出而消失了,所以看起来就是进度条再滚动的效果:

CSS Code复制内容到剪贴板
  1.     .rightcircle{   
  2.   border-top:20px solid green;   
  3.   border-right:20px solid green;   
  4.   rightright:0;   
  5.   -webkit-animation: circleProgressLoad_right 5s linear infinite;   
  6. }   
  7. .leftcircle{   
  8.   border-bottom:20px solid green;   
  9.   border-left:20px solid green;   
  10.   left:0;   
  11.   -webkit-animation: circleProgressLoad_left 5s linear infinite;   
  12. }   
  13. @-webkit-keyframes circleProgressLoad_right{   
  14.   0%{   
  15.     -webkit-transform: rotate(45deg);   
  16.   }   
  17.   50%,100%{   
  18.     -webkit-transform: rotate(225deg);   
  19.   }   
  20. }   
  21. @-webkit-keyframes circleProgressLoad_left{   
  22.   0%,50%{   
  23.     -webkit-transform: rotate(45deg);   
  24.   }   
  25.   100%{   
  26.     -webkit-transform: rotate(225deg);   
  27.   }   
  28. }  

图解CSS3制作圆环形进度条的实例教程

当然,我们只需要调整一下角度就可以实现反向的效果:

CSS Code复制内容到剪贴板
  1.     .circleProgress{   
  2.   width160px;   
  3.   height160px;   
  4.   border:20px solid transparent;   
  5.   border-radius: 50%;   
  6.   positionabsolute;   
  7.   top:0;   
  8.   -webkit-transform: rotate(-135deg);   
  9. }   
  10. @-webkit-keyframes circleProgressLoad_right{   
  11.   0%{   
  12.     -webkit-transform: rotate(-135deg);   
  13.   }   
  14.   50%,100%{   
  15.     -webkit-transform: rotate(45deg);   
  16.   }   
  17. }   
  18. @-webkit-keyframes circleProgressLoad_left{   
  19.   0%,50%{   
  20.     -webkit-transform: rotate(-135deg);   
  21.   }   
  22.   100%{   
  23.     -webkit-transform: rotate(45deg);   
  24.   }   
  25. }  

图解CSS3制作圆环形进度条的实例教程

好的,接下来就是奔向最终效果了,正如我们一开始看到的那样,有点像我们使用360卫士清理垃圾时的类似效果,当然不是很像啦:

CSS Code复制内容到剪贴板
  1.     .circleProgress_wrapper{   
  2.   width200px;   
  3.   height200px;   
  4.   margin50px auto;   
  5.   positionrelative;   
  6.   border:1px solid #ddd;   
  7. }   
  8. .wrapper{   
  9.   width100px;   
  10.   height200px;   
  11.   positionabsolute;   
  12.   top:0;   
  13.   overflowhidden;   
  14. }   
  15. .rightright{   
  16.   rightright:0;   
  17. }   
  18. .left{   
  19.   left:0;   
  20. }   
  21. .circleProgress{   
  22.   width160px;   
  23.   height160px;   
  24.   border:20px solid rgb(232, 232, 12);   
  25.   border-radius: 50%;   
  26.   positionabsolute;   
  27.   top:0;   
  28.   -webkit-transform: rotate(45deg);   
  29. }   
  30. .rightcircle{   
  31.   border-top:20px solid green;   
  32.   border-right:20px solid green;   
  33.   rightright:0;   
  34.   -webkit-animation: circleProgressLoad_right 5s linear infinite;   
  35. }   
  36. .leftcircle{   
  37.   border-bottom:20px solid green;   
  38.   border-left:20px solid green;   
  39.   left:0;   
  40.   -webkit-animation: circleProgressLoad_left 5s linear infinite;   
  41. }   
  42. @-webkit-keyframes circleProgressLoad_right{   
  43.   0%{   
  44.     border-top:20px solid #ED1A1A;   
  45.     border-right:20px solid #ED1A1A;   
  46.     -webkit-transform: rotate(45deg);   
  47.   }   
  48.   50%{   
  49.     border-top:20px solid rgb(232, 232, 12);   
  50.     border-right:20px solid rgb(232, 232, 12);   
  51.     border-left:20px solid rgb(81, 197, 81);   
  52.     border-bottom:20px solid rgb(81, 197, 81);   
  53.     -webkit-transform: rotate(225deg);   
  54.   }   
  55.   100%{   
  56.     border-left:20px solid green;   
  57.     border-bottom:20px solid green;   
  58.     -webkit-transform: rotate(225deg);   
  59.   }   
  60. }   
  61. @-webkit-keyframes circleProgressLoad_left{   
  62.   0%{   
  63.     border-bottom:20px solid #ED1A1A;   
  64.     border-left:20px solid #ED1A1A;   
  65.     -webkit-transform: rotate(45deg);   
  66.   }   
  67.   50%{   
  68.     border-bottom:20px solid rgb(232, 232, 12);   
  69.     border-left:20px solid rgb(232, 232, 12);   
  70.     border-top:20px solid rgb(81, 197, 81);   
  71.     border-right:20px solid rgb(81, 197, 81);   
  72.     -webkit-transform: rotate(45deg);   
  73.   }   
  74.   100%{   
  75.     border-top:20px solid green;   
  76.     border-right:20px solid green;   
  77.     border-bottom:20px solid green;   
  78.     border-left:20px solid green;   
  79.     -webkit-transform: rotate(225deg);   
  80.   }   
  81. }  

可以看到,其实就是多了一些改变不同边框颜色的动画而已,这个就给大家自己去实践吧! 主要还是利用两个矩形来完成这么一个圆形进度条效果,特别注意overflow这条规则,起着关键作用。

HTML / CSS 相关文章推荐
css3新增颜色表示方式分享
Apr 15 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
CSS link与@import的区别和用法解析
May 07 HTML / CSS
CSS中的字体大小设置属性总结
May 24 #HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 #HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 #HTML / CSS
CSS3中的Media Queries学习笔记
May 23 #HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 #HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 #HTML / CSS
css 元素选择器的简单实例
May 23 #HTML / CSS
You might like
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
js实现内置计时器
2019/12/16 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python常见异常分类与处理方法
2017/06/04 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
个人自我鉴定总结
2014/03/25 职场文书
共产党员承诺书
2014/03/25 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
python常见的占位符总结及用法
2021/07/02 Python
MySQL插入数据与查询数据
2022/03/25 MySQL