實現一個圓形進度條

如今的一些數據運營活動h5頁面中,一般回涉及到圓形的進度條,好比京東白條,螞蟻芝麻分。最近作了一個相似的,固然前期想法是用canvas作,可是考慮到低端安卓手機的渲染能力,最終以純原生css+js實現,總結一下css

效果圖

思路

index0底層一個色值#c1a76b的圓,中間index1一個三角形,也就是底邊缺的效果,上層index2是白色全圓(帶陰影,600和信用極好包裹在裏面),另外左右50%各鋪一個index3,index4透明層,這個層overflow:hidden,兩個層裏面都有一個#f7f7f7的填充,經過旋轉這兩個填充物來實現圓形進度效果(先左邊旋轉180deg完,再旋轉右邊)html

動態圖

貼代碼

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: #f7f7f7;
            }
            .new-cricle {
                position: relative;
                width: 148px;
                height: 148px;
                border-radius: 50%;
                background-color: #c1a76b;
                margin: 0 auto;
                z-index: 0;
            }

            .new-cricle .cricle-text {
                position: absolute;
                top: 20px;
                width: 130px;
                left: 50%;
                margin-left: -65px;
                z-index: 5;
                text-align: center;
            }
            .new-cricle .cricle-text.p0 {
                top: 28px;
                font-size: 42px;
                color: #C09B5B;
                font-family: DINAlternate-Bold;
            }
            .new-cricle .cricle-text.txt2 {
                top: 85px;
                font-size: 16px;
                color: #C09B5B;
                font-family: PingFangSC-Medium;
            }

            .cricle-left-area {
                position: absolute;
                top: -1px;
                left: -1px;
                width: 75px;
                height: 150px;
                background-color: transparent;
                overflow: hidden;
            }
            .cricle-left {
                position: absolute;
                width: 75px;
                height: 150px;
                background-color: #f7f7f7;
                border-radius: 75px 0 0 75px;
                transform-origin: right center;
                z-index: 1;
                transition: 1.5s all;
                transform: rotate(35deg);
            }

            .cricle-right-area {
                position: absolute;
                top: -1px;
                right: -1px;
                width: 75px;
                height: 150px;
                background-color: transparent;
                overflow: hidden;
            }
            .cricle-right {
                position: absolute;
                width: 75px;
                height: 150px;
                background-color: #f7f7f7;
                border-radius: 0 75px 75px 0;
                transform-origin: left center;
                z-index: 2;
                transition: 1.5s all;
            }
            .triangle {
                width: 0;
                height: 0;
                border-width: 0 80px 80px;
                border-style: solid;
                border-color: transparent transparent #f7f7f7;/*透明 透明  白*/
                position: absolute;
                bottom: -10px;
                left: 50%;
                margin-left: -80px;
                z-index: 3;

            }
            .cricle-all {
                position: relative;
                width: 128px;
                height: 128px;
                border-radius: 50%;
                background-color: #fff;
                box-shadow: 0 2px 15px 0 #D8CEBB;
                margin: 0 auto;
                z-index: 4;
                top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="new-cricle">
            <div class="cricle-left-area">
                <div class="cricle-left" id="cricleLeft"></div>
            </div>

            <div class="cricle-right-area">
                <div class="cricle-right" id="cricleRight"></div>
            </div>

            <div class="triangle"></div>
            <div class="cricle-all"></div>

            <div class="cricle-text p0">600</div>
            <div class="cricle-text txt2">信用極好</div>
        </div>
    </body>

    <script>
        var $cricleLeft = document.getElementById('cricleLeft')
        var $cricleRight = document.getElementById('cricleRight')
        
        var angle = 360; //旋鈕角度

        setTimeout(function(){
            if(angle >= 180){
                $cricleLeft.style.transform = 'rotate(180deg)';
                setTimeout(function(){
                    $cricleRight.style.transform = 'rotate('+ (angle - 180) +'deg)';
                }, 1400)
            }else{
                $cricleLeft.style.transform = 'rotate(' + angle + 'deg)';
            }
        }, 1000)
        
        
    </script>
</html>

在線demo地址

點擊進入canvas

存在問題

  • 左邊當旋轉到180deg有一個放緩慢的效果
相關文章
相關標籤/搜索