css如何实现画圆

迷南。 2023-06-12 04:12 6阅读 0赞

## css如何实现画圆 ##

css代码

.circle_process {
        
                position: relative;
                width: 199px;
                height: 200px;
            }
    
            .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 green;
                border-right: 20px solid green;
                right: 0;
                animation: circle_right 5s linear infinite;
            }
    
            .circle_process .leftcircle {
        
                border-bottom: 20px solid green;
                border-left: 20px solid green;
                left: 0;
                animation: circle_left 5s linear infinite;
            }
    
            @keyframes circle_right {
        
                0% {
        
                    -webkit-transform: rotate(-135deg);
                }
    
                50%,
                100% {
        
                    -webkit-transform: rotate(45deg);
                }
            }
    
            @keyframes circle_left {
        
    
                0%,
                50% {
        
                    -webkit-transform: rotate(-135deg);
                }
    
                100% {
        
                    -webkit-transform: rotate(45deg);
                }
            }

html代码

<div class="circle_process">
            <div class="wrapper right">
                <div class="circle rightcircle"></div>
            </div>
            <div class="wrapper left">
                <div class="circle leftcircle" id="leftcircle"></div>
            </div>
        </div>