zoukankan      html  css  js  c++  java
  • CSS3特效(3)——环形进度条

    环形进度条

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .circleProgress_wrapper{
                 200px;
                height: 200px;
                margin: 50px auto;
                position: relative;
                border:1px solid #ddd;
            }
    
            .wrapper{
                 100px;
                height: 200px;
                position: absolute;
                top:0;
                overflow: hidden;
            }
            .right{
                right: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;
                right: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);
                }
            }
        </style>
    </head>
    <body>
    <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>
    </body>
    </html>
    
  • 相关阅读:
    JAVA-throw new IOException报错unhandled exception:java.lang.Exception 2021年6月7日
    GIt保持远程 源仓库与Fork仓库同步--2017年6月13日
    Python的getattr()-2017年6月7日
    JavaScript学习-2017年5月18日
    Writing your first Django app--2017年5月9日
    M4-AC6 Oh,Trojan Again--2017年5月9日
    吴军硅谷来信
    【1】Prologue--A Game of Thrones--2017年4月8日
    M4-PC9 Read 10,000 Books,Travel 10,000 Miles--2017年5月8日
    资源分配图RAG的化简
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9605587.html
Copyright © 2011-2022 走看看