晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法。

这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~。

第一种:通过overflow溢出隐藏的方式:

这种方法好处在于容易理解,只需要一层一层的嵌套,即可得到效果,但是实现起来较为繁琐,HTML的结构也比较冗余。

先看HTML结构:

    <div class="circle-one">
        <div class="circle-one-l">
            <div class="circle-one-l-in"></div>
        </div>
        <div class="circle-one-r">
            <div class="circle-one-r-in"></div>
        </div>
    </div>

.circle-one-l :用于控制左侧的显示范围。

.circle-one-l-in : 用于控制只显示半圆。

.circle-one-l-in:after : 用于生成一条完整的圆,这里的圆是通过边框线的方式显示出来的,所以对应的宽与高要进行一定的减去。

circle-one-r :用于控制右侧的显示范围。

  ...

在看CSS代码

        .circle-one{width: 200px;height: 200px;position:relative;margin:50px auto;overflow:hidden;}
        .circle-one-l,.circle-one-l-in{width: 100px;height: 200px;position:absolute;left:0px;top:0px;overflow:hidden;}
        .circle-one-l-in{
            transform-origin:100% 50%;
            transform:rotate(-180deg);
            animation:circle_one_l linear 2s  forwards;
        }
        .circle-one-l-in:after{
            content:' ';
            position:absolute;
            left:;
            top:;
            border-radius: 50%;
            border:10px solid #000;
            width: 180px;
            height: 180px;
        }
        .circle-one-r,.circle-one-r-in{width:100px;height:200px;position:absolute;right:0px;top:0px;overflow:hidden;}
        .circle-one-r-in{
            transform:rotate(-180deg);
            transform-origin:0% 50%;
            animation:circle_one_r linear 2s 2s  forwards;}
        .circle-one-r-in:after{
            content:' ';
            position:absolute;
            left:-100px;
            top:;
            border-radius: 50%;
            border:10px solid #000;
            width: 180px;
            height: 180px;
        }
        @keyframes circle_one_l{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }
        @keyframes circle_one_r{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }

使用overflow溢出隐藏的方式实现的圆环进度效果,其核心实现就是通过overflow分别划分两个显示范围,然后在每个显示范围的内部,再在其子标签 -in 上通过使用overflow,来得到两个半圆,后期,在通过旋转这两个半圆,便得到进度的效果了。

第二种:通过使用clip:rect进行裁剪的方法:

这种方法的好处在于节省HTML标签结构,但是clip却不怎么好理解。

clip是一种CSS裁剪属性,只能作用在绝对定位(absolute)的元素上,可以控制元素可显示的范围。

clip有四个属性值,分别是top,right,bottom,left

格式:clip:rect(top,right,bottom,left)

可以形象的将clip:rect理解成一个点,而它的四个值:top,right,bottom,left,根据值的大于小,分别对上、右、下、左四个方向进行扩张或收缩。

*其中如果某个值是显示范围的最大值,可以用auto表示

----------------------------------------------------------------------------

预热说完,下面说正经的

使用clip裁剪方式实现的圆环进度效果,其核心实现就是通过clip裁剪出左右两个半圆,然后对半圆进行旋转,拼接出完整的圆环进度效果:

先看HTML结构:

    <div class="circle-two">
        <div class="circle-two-l"></div>
        <div class="circle-two-r"></div>
        <div class="circle-two-mask"></div>
    </div>

circle-two-l 这个div是用于控制左边显示区域,因为裁剪区域是: clip:rect(0,100px,auto,0);

circle-two-l:after 这是一个实心的黑色背景的圆形,但是通过裁剪区域只能显示半圆

circle-two-r 这个div是用于控制右边显示区域,因为裁剪区域是: clip:rect(0,auto,auto,100px)

circle-two-r:after 这是一个实心的黑色背景的圆形,但是通过裁剪区域只能显示半圆

circle-two-mask 则是遮罩,它与背景色相同。

下面看看CSS:

        .circle-two{width: 200px;height: 200px;position:relative;margin:50px auto;}
        .circle-two-l{;;clip:rect(0,100px,auto,0);}
        .circle-two-l:after{
            content:' ';
            background:#000;
            width:200px;
            height:200px;
            border-radius:50%;
            position:absolute;
            left:;
            top:;
            clip:rect(0,100px,auto,0);
            transform:rotate(-180deg);
            animation:circle_two_l linear 2s forwards;
        }
        .circle-two-r{;;clip:rect(0,auto,auto,100px);}
        .circle-two-r:after{
            content:' ';
            background:#000;
            width:200px;
            height:200px;
            border-radius:50%;
            position:absolute;
            left:;
            top:;
            clip:rect(0,auto,auto,100px);
            transform:rotate(-180deg);
            animation:circle_two_r linear 2s 2s forwards;
        }
        .circle-two-mask{width: 180px;height: 180px;background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;margin-top:-90px;margin-left:-90px;}

        @keyframes circle_two_l{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }
        @keyframes circle_two_r{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }

因此最终,分别通过控制旋转左右两个半圆,再结合 .circle-two-l ,   .circle-two-r clip控制的显示范围,便实现了进度的增加效果。

-----------------------------------

好了,结束,进被窝睡觉~明天继续奋斗,加油~

两种CSS3圆环进度条详解的更多相关文章

  1. Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解

    Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解   在swing中,基于业务的考量,会有对话框来限制用户的行为及对用户的动作进行提示. Swing中 ...

  2. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  3. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  4. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  5. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

  7. css3实现进度条的模拟

    两种进度条动画的实现: 1.css3,但IE9-不支持. 2.js动画,兼容性好,但没有css3实现的顺畅 Demo: <html>    <head>        < ...

  8. CSS3中渐变gradient详解

    这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradien ...

  9. 用Raphael在网页中画圆环进度条

    原文 :http://boytnt.blog.51cto.com/966121/1074215 条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆 放就不太好看了.随着cs ...

随机推荐

  1. linux动态时钟探索

    在早期的linux内核版本的时间概念都是由周期时钟提供的.虽然比较有效,但是,对于关注能耗电量的系统上,就不能满足长时间休眠的需求,因为周期系统要求必须在一定的频率下,周期性的处于活动状态.因此,li ...

  2. art虚拟机启动问题分析

    欢迎转载opendevkit文章, 文章原始地址: http://www.opendevkit.com/?e=69 Attempt to invoke native method in non-sta ...

  3. SQLServer2008部署镜像

    SQL Server 2008 R2数据库镜像部署 概述 “数据库镜像”是一种针对数据库高可用性的基于软件的解决方案.其维护着一个数据库的两个相同的副本,这两个副本分别放置在不同的SQL Server ...

  4. mac下缺乏make wget怎么办?

    1.下载command Line tools for Xcode http://www.mkyong.com/mac/how-to-install-gcc-compiler-on-mac-os-x/ ...

  5. (转)CWnd与HWND的区别与转换

    一.区别HWND是句柄,CWnd是MFC窗体类,CWnd中包含HWND句柄成员对象是m_hWnd.HWND是Windows系统中对所有窗口的一种标识,即窗口句柄.这是一个SDK概念.   CWnd是M ...

  6. shell下解码url

    http://aaronw.me/static/779.html 封装了一下,有需要的拿走 function url_decode() { local url=$ echo $url | awk 'B ...

  7. 【Codeforces Round#279 Div.2】B. Queue

    这题看别人的.就是那么诚实.http://www.cnblogs.com/zhyfzy/p/4117481.html B. Queue During the lunch break all n Ber ...

  8. RHEL7 -- Linux搭建FTP虚拟用户

    安装vsftpd软件包[root@localhost ~]# yum install vsftpd -y [root@localhost ~]# yum install db4 db4-utils 建 ...

  9. webkit report

    %for main_o in objects: <% print main_o.sale_announcement_ids %> %for o in announcement_pool.b ...

  10. couchdb and redis

    http://www.jdon.com/artichect/scalable5.html http://www.dedecms.com/knowledge/data-base/nosql/2012/0 ...