Wie erreicht man den kreisförmigen Fortschrittsbalkeneffekt? Codebeispiel zum Implementieren des kreisförmigen Fortschrittsbalkeneffekts mithilfe von CSS3

Im vorherigen Artikel haben wir vorgestellt, wie man CSS3 verwendet, um den Bar-Fortschrittsbalkeneffekt zu erzielen (vollständiger Code im Anhang) und etwas über die Praktikabilität des Fortschrittsbalkens gelernt, daher stellen wir Ihnen heute einen weiteren vor Formular. Fortschrittsbalken: Kreisförmiger Fortschrittsbalken.

Diese Art von Fortschrittsbalken eignet sich zum Laden von Seiten und für Ring-Timer-Seiten. Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS3, um den kreisförmigen Fortschrittsbalkeneffekt zu erzielen. Ich hoffe, dass er für Freunde hilfreich ist.

So verwenden Sie CSS3, um das Prinzip des Bar-Ring-Fortschrittsbalkeneffekts zu realisieren

1. Zuerst müssen wir a zeichnen kreisförmiger Fortschrittsbalken, aber die div-Formate sind alle quadratisch, daher muss der Randradius verwendet werden, um das Quadrat in einen Kreis umzuwandeln.
   

2. Der kreisförmige Fortschrittsbalken dreht sich ständig. Wir können die Rotationsanweisung (Grad) in CSS3 verwenden, um diesen Effekt zu erzielen.

3. Hier klären wir die Verwendung von Rotation (Grad) im Detail

Rotation: 1 .rotateX (deg) //Um die x-Achse drehen

                  2.rotateY(deg) //Um die Y-Achse drehen Um die Z-Achse drehen

B. Übersetzung: translator (a , b) // In x-, y-Richtung, A, B-Pixelabstand. Die Zentrierung kann mit Translate(-50%,50%) erreicht werden.

Translatedx (a) // Pixelabstand in X-Richtung übertragen.

Translatey (a) // Den Pixelabstand in Y-Richtung scheißen.

Translatedz (a) // Den Pixelabstand in Z-Richtung anpassen.

So verwenden Sie CSS3, um die Schritte für den Balkenring-Fortschrittsbalkeneffekt zu erreichen (Code)

Schritt 1: HTML-Teil

<div class="progress_wrap js_halfClassNameObj">
    <div class="right under">
        <div class="circleProgress rightcircle"></div>
    </div>
    <div class="left under">
        <div class="circleProgress leftcircle"></div>
    </div>
    <div class="right up">
        <div class="circleProgress rightcircle js_progressRight" 
        style="-webkit-transform:rotate(&#39;+circleData.rightRotate.toString()+&#39;deg)"></div>
    </div>
    <div class="left up">
        <div class="circleProgress leftcircle js_progressLeft"
         style="-webkit-transform:rotate(&#39;+circleData.leftRotate.toString()+&#39;deg)"></div>
    </div>
    //percent小于50时需要使用遮罩进行遮挡超出环形范围部分
    <div class="left up_left_cover js_giftLeftCover" style="display:&#39;+circleData.leftCircleDisplay+&#39;">
        <div class="circleProgress leftcircle color_border_t_l04"></div>
    </div>
    <div class="num">
        <div>剩余</div>
        <div class="js_giftPercent">&#39;+circleData.percent+&#39;%</div>
    </div>
</div>

Schritt 2: CSS-Teil

.progress_wrap{
                   position: relative;
                   margin:0 0 0 .14rem;
                   width:.92rem;height:.92rem;
                   //little和more用来展示黄色和绿色的效果
                   &.little{
                       .under{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_under_little;
                           }
                           .rightcircle{
                               border-right:$progress_border_under_little;
                           }
                           .leftcircle{
                               border-left:$progress_border_under_little;
                           }
                       }
                       .up{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_up_little;
                           }
                           .rightcircle{
                               border-right:$progress_border_up_little;
                           }
                           .leftcircle{
                               border-left:$progress_border_up_little;
                           }
                       }
                       //用遮挡实现左侧剩余百分比，遮住超出环形范围部分；核心是使用同心圆进行边框进行遮挡
                       .up_left_cover{
                           width:.47rem;height:.92rem;
                           .leftcircle{
                               top:-.02rem;
                               width:.74rem;height:.74rem;
                               border:.11rem solid transparent;
                               border-top:$progress_border_up_left_cover_little;
                               border-left:$progress_border_up_left_cover_little;
                               //实际值为195deg,被遮挡环颜色值深有光晕,需要将角度进行微调（-191deg）
                               进行完全遮挡
                               -webkit-transform:rotate(-191deg);
                           }
                       }
                   }
                   &.more{
                       .under{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_under;
                           }
                           .rightcircle{
                               border-right:$progress_border_under;
                           }
                           .leftcircle{
                               border-left:$progress_border_under;
                           }
                       }
                       .up{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_up;
                           }
                           .rightcircle{
                               border-right:$progress_border_up;
                           }
                           .leftcircle{
                               border-left:$progress_border_up;
                           }
                       }
                   }
                   .right,.left{
                       position: absolute;top:0;overflow:hidden;
                       width:.46rem;height:.92rem;
                       .circleProgress{
                           position: absolute; top:0;
                           width: .78rem; height: .78rem;
                           border:.07rem solid transparent; border-radius: 50%;
                       }
                       .rightcircle{
                           right:0;
                           -webkit-transform: rotate(15deg);
                       }
                       .leftcircle{
                           left:0;
                           -webkit-transform: rotate(-15deg);
                       }
                   }
                   .right{
                       right:0;
                   }
                   .left{
                       left:0;
                   }
                   .num{
                       position: absolute;left:50%;top:50%;
                       width:.5rem;
                       transform:translate(-50%,-50%);
                       font-size:.12rem;color:$public_auxiliary_col;text-align:center;line-height:.26rem;
                   }
               }

Schritt 3: JS-Teil

function giftCircleProgressFn(per){
            var circleData = {};
            var percent = parseInt(per);
            //领取进度环形颜色className
            var halfClassName = percent<50?"little":"more";
            //左半环遮罩层显示样式状态
            var leftCircleDisplay = percent<50?"block":"none";
            var leftRotate = 0;
            var rightRotate = 0;
            //以50%为界限;<50%:右半圆占比为0,左半圆需要使用遮罩进行遮挡,展示剩余部分
            //           >50%:左半圆占比100%,右半圆直接使用百分比计算所占部分即可
            //注意：在半圆中计算百分比时,要将百分比乘以2。
            if(percent<50){
                leftRotate = -15-180+150*(percent*2)/100;   
                rightRotate = -135;
            }else{
                leftRotate = -15;
                rightRotate = -135+(150*((percent-50)*2)/100);   //比例在半环计算需要*2倍
            }
            circleData = {
                leftRotate:leftRotate,  //左半环进度
                rightRotate:rightRotate, //右半环进度
                halfClassName:halfClassName, //50% 进度环 变色
                leftCircleDisplay:leftCircleDisplay, //左半环遮罩
                percent:per  //进度百分比
            }
            return circleData
        }

Der Effekt ist wie im Bild gezeigt

Das obige ist der detaillierte Inhalt vonWie erreicht man den kreisförmigen Fortschrittsbalkeneffekt? Codebeispiel zum Implementieren des kreisförmigen Fortschrittsbalkeneffekts mithilfe von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!