zoukankan      html  css  js  c++  java
  • CSS3创建圆圈进度条

    最近在工作中需要做一个圆圈倒计时,刚开始的想法是做个纯数字的倒计时即可,可是需求觉得这个不太好看,想加个倒计时进度条。于是就有了接下来的分析过程...

    我们知道CSS3可以很方便的画圆,圆环,然后在加上一个旋转动画不就可以实现了吗?
    于是先把圆环画出来了

    做到这里问题又来了,如何让红色的圆环一点一点的消失呢?此处一个圆环再怎么旋转终究是一个圆环, 此时觉得一个圆可能不够,何不在画一个白色的半圆再旋转呢?可是白色的半圆又如何一点一点的显示呢?貌似又回到了问题的起点。 我们知道overflow:hidden;可以让多余的部分隐藏,如果在配合两个半圆旋转不就可以实现了吗? 先画两个半圆试试 左半圆
    右半圆
    如果都顺时针旋转45度再刚刚好拼在一起就是一个完整的圆环

    此时当我们再旋转的时候发现,圆环可以实现一点一点的消失了,但是当转过一个180度的时候这个半圆右出现了,此时我们可以用到前面的overflow:hidden;
    CSS代码如下

    .circleProgress_wrapper{
         160px;
        height: 160px;
        margin: 10px auto;
        position: relative;
    }
    .wrapper{
         80px;
        height: 160px;
        position: absolute;
        top:0;
        overflow: hidden;
    }
    .right{
        right:0;
    }
    .left{
        left:0;
    }
    .circleProgress{
         160px;
        height: 160px;
        border:20px solid transparent;
        border-radius: 50%;
        position: absolute;
        top:0;
        /*transform: rotate(45deg);*/
    }
     .rightcircle{
        border-top:20px solid red;
        border-right:20px solid red;
        right:0;
        animation: circleProgressLoad_right 6s linear infinite;
    }
    .leftcircle{
        border-bottom:20px solid red;
        border-left:20px solid red;
        left:0;
        animation: circleProgressLoad_left 6s linear infinite;
    }
    

    接下来用css3写个旋转动画即可

     .rightcircle{
        border-top:20px solid red;
        border-right:20px solid red;
        right:0;
        animation: circleProgressLoad_right 6s linear infinite;
    }
    .leftcircle{
        border-bottom:20px solid red;
        border-left:20px solid red;
        left:0;
        animation: circleProgressLoad_left 6s linear infinite;
    }
    @keyframes circleProgressLoad_right{
        0%{
            transform: rotate(45deg);
        }
        50%,100%{
            transform: rotate(225deg);
        }
    }
    @keyframes circleProgressLoad_left{
        0%,50%{
            transform: rotate(45deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }
    

    完整的demo可以查看下面的实例

    目前这里的倒计时动画是动画时间是6s,这里可以根据需要自行修改,这里的运行时间我在项目中是用js控制的,这样可以根据后台下发的时间值来倒计时,非常方便。
  • 相关阅读:
    centos python sh recode command not find的解决办法
    Webmail邮件攻防实战技术总结[转]
    关于c#字符串三种逆转方法及性能比较的另外看法
    随机生成10个含有1万个qq邮箱的文件(Python)
    C#对IE使用Proxy(代理)
    sohu邮箱的联系人获取
    Python 的二进制文件读写需要注意的地方
    hotmail解码遇到的&#解码问题
    利用cookie收取Hotmail信件
    CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\web\4b49f661\23a749fc\App_Web_default.aspx.cdcab7d2.zii77dc.dll
  • 原文地址:https://www.cnblogs.com/jesse131/p/9079233.html
Copyright © 2011-2022 走看看