css-环形进度条 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .circle_process{

            position: relative;
            width: 199px;
            height : 200px;
            -webkit-transform: rotate(-28deg);
        }
        .circle_process:before{
            content: " ";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #F2994A;
            z-index: 999;
        }

        .circle_process .wrapper{

            width: 100px;
            height: 200px;
            position: absolute;
            top:0;
            overflow: hidden;

        }

        .circle_process .right{
            right:0;
        }

        .circle_process .left{

            left:0;

        }

        .circle_process .circle{

            width: 160px;

            height: 160px;

            border:20px solid transparent;

            border-radius: 50%;

            position: absolute;

            top:0;

            transform : rotate(-135deg);

        }

        .circle_process .rightcircle{

            border-top:20px solid #07F8FF;

            border-right:20px solid #07F8FF;

            right:0;

            /*-webkit-animation: circle_right 5s linear infinite;*/

        }

        .circle_process .leftcircle{

            border-bottom:20px solid #07F8FF;

            border-left:20px solid #07F8FF;

            left:0;

            /*-webkit-animation: circle_left 5s linear infinite;*/

        }

        /*@-webkit-keyframes circle_right{*/

            /*0%{*/

                /*-webkit-transform: rotate(-135deg);*/

            /*}*/

            /*50%,100%{*/

                /*-webkit-transform: rotate(45deg);*/

            /*}*/

        /*}*/

        /*@-webkit-keyframes circle_left{*/

            /*0%,50%{*/

                /*-webkit-transform: rotate(-135deg);*/

            /*}*/

            /*100%{*/

                /*-webkit-transform: rotate(45deg);*/

            /*}*/

        /*}*/
        .circle_process .circle_left{
            -webkit-transform: rotate(45deg);

        }
        .circle_process .circle_right{
            -webkit-transform: rotate(0deg);

        }
    </style>
</head>
<body>
<div class="circle_process">

    <div class="wrapper right">

        <div class="circle rightcircle circle_right"></div>

    </div>

    <div class="wrapper left">

        <div class="circle leftcircle circle_left" id="leftcircle"></div>

    </div>

</div>
</body>
</html>

 

posted @ 2022-06-06 11:35  小林222  阅读(115)  评论(0)    收藏  举报