zoukankan      html  css  js  c++  java
  • 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程

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

        .circleprogress{   
             160px;   
            height: 160px;   
            border:20px solid red;   
            border-radius: 50%;   
        }  

    2016526120050760.jpg (150×157)

        .circleprogress{   
           160px;   
          height: 160px;   
          border:20px solid red;   
          border-left:20px solid transparent;   
          border-bottom:20px solid transparent;   
          border-radius: 50%;   
        }  

    2016526120114570.jpg (160×140)

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

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

        .circleProgress_wrapper{   
           200px;   
          height: 200px;   
          margin: 50px auto;   
          position: relative;   
          border:1px solid #ddd;   
        }  

    2016526120138653.jpg (244×213)

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

        <div class="circleProgress_wrapper">  
                <div class="wrapper right">  
                    <div class="circleProgress rightcircle"></div>  
                </div>  
                <div class="wrapper left">  
                    <div class="circleProgress leftcircle"></div>  
                </div>  
         </div>  
    
    
    
    
    
        .wrapper{   
           100px;   
          height: 200px;   
          position: absolute;   
          top:0;   
          overflow: hidden;   
        }   
        .rightright{   
          rightright:0;   
        }   
        .left{   
          left:0;   
        }  

    2016526120213329.jpg (199×185)

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

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

        .circleProgress{   
           160px;   
          height: 160px;   
          border:20px solid transparent;   
          border-radius: 50%;   
          position: absolute;   
          top:0;   
        }   
        .rightcircle{   
          border-top:20px solid green;   
          border-right:20px solid green;   
          rightright:0;   
        }  

    2016526120235425.jpg (180×173)

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

        .circleProgress{   
           160px;   
          height: 160px;   
          border:20px solid transparent;   
          border-radius: 50%;   
          position: absolute;   
          top:0;   
          -webkit-transform: rotate(45deg);   
        }  

    2016526120256256.jpg (192×179)

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

    .leftcircle{   
        border-bottom:20px solid green;   
        border-left:20px solid green;   
        left:0;   
    }  

    2016526120317703.jpg (180×163)

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

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

    2016526120354271.gif (294×233)

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

        .circleProgress{   
       160px;   
      height: 160px;   
      border:20px solid transparent;   
      border-radius: 50%;   
      position: absolute;   
      top:0;   
      -webkit-transform: rotate(-135deg);   
    }   
    @-webkit-keyframes circleProgressLoad_right{   
      0%{   
        -webkit-transform: rotate(-135deg);   
      }   
      50%,100%{   
        -webkit-transform: rotate(45deg);   
      }   
    }   
    @-webkit-keyframes circleProgressLoad_left{   
      0%,50%{   
        -webkit-transform: rotate(-135deg);   
      }   
      100%{   
        -webkit-transform: rotate(45deg);   
      }   
    }  

    2016526120418687.gif (294×233)

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

            .circleProgress_wrapper{   
           200px;   
          height: 200px;   
          margin: 50px auto;   
          position: relative;   
          border:1px solid #ddd;   
        }   
        .wrapper{   
           100px;   
          height: 200px;   
          position: absolute;   
          top:0;   
          overflow: hidden;   
        }   
        .rightright{   
          rightright:0;   
        }   
        .left{   
          left:0;   
        }   
        .circleProgress{   
           160px;   
          height: 160px;   
          border:20px solid rgb(232, 232, 12);   
          border-radius: 50%;   
          position: absolute;   
          top:0;   
          -webkit-transform: rotate(45deg);   
        }   
        .rightcircle{   
          border-top:20px solid green;   
          border-right:20px solid green;   
          rightright:0;   
          -webkit-animation: circleProgressLoad_right 5s linear infinite;   
        }   
        .leftcircle{   
          border-bottom:20px solid green;   
          border-left:20px solid green;   
          left:0;   
          -webkit-animation: circleProgressLoad_left 5s linear infinite;   
        }   
        @-webkit-keyframes circleProgressLoad_right{   
          0%{   
            border-top:20px solid #ED1A1A;   
            border-right:20px solid #ED1A1A;   
            -webkit-transform: rotate(45deg);   
          }   
          50%{   
            border-top:20px solid rgb(232, 232, 12);   
            border-right:20px solid rgb(232, 232, 12);   
            border-left:20px solid rgb(81, 197, 81);   
            border-bottom:20px solid rgb(81, 197, 81);   
            -webkit-transform: rotate(225deg);   
          }   
          100%{   
            border-left:20px solid green;   
            border-bottom:20px solid green;   
            -webkit-transform: rotate(225deg);   
          }   
        }   
        @-webkit-keyframes circleProgressLoad_left{   
          0%{   
            border-bottom:20px solid #ED1A1A;   
            border-left:20px solid #ED1A1A;   
            -webkit-transform: rotate(45deg);   
          }   
          50%{   
            border-bottom:20px solid rgb(232, 232, 12);   
            border-left:20px solid rgb(232, 232, 12);   
            border-top:20px solid rgb(81, 197, 81);   
            border-right:20px solid rgb(81, 197, 81);   
            -webkit-transform: rotate(45deg);   
          }   
          100%{   
            border-top:20px solid green;   
            border-right:20px solid green;   
            border-bottom:20px solid green;   
            border-left:20px solid green;   
            -webkit-transform: rotate(225deg);   
          }   
        }  
    

      

  • 相关阅读:
    【数据结构】线性表&&顺序表详解和代码实例
    【智能算法】超详细的遗传算法(Genetic Algorithm)解析和TSP求解代码详解
    【智能算法】用模拟退火(SA, Simulated Annealing)算法解决旅行商问题 (TSP, Traveling Salesman Problem)
    【智能算法】迭代局部搜索(Iterated Local Search, ILS)详解
    10. js时间格式转换
    2. 解决svn working copy locked问题
    1. easyui tree 初始化的两种方式
    10. js截取最后一个斜杠后面的字符串
    2. apache整合tomcat部署集群
    1. apache如何启动
  • 原文地址:https://www.cnblogs.com/hailun/p/6245095.html
Copyright © 2011-2022 走看看