원형 진행률 표시줄 효과를 얻는 방법은 무엇입니까? CSS3를 사용하여 순환 진행률 표시줄 효과를 구현하는 코드 예제-CSS 튜토리얼-php.cn

원형 진행률 표시줄 효과를 얻는 방법은 무엇입니까? CSS3를 사용하여 순환 진행률 표시줄 효과를 구현하는 코드 예제

坏嘻嘻

풀어 주다： 2018-09-27 12:01:44

원래의

5734명이 탐색했습니다.

이전 기사에서는 css3을 사용하여 진행률 표시줄 효과를 얻는 방법(전체 코드 첨부)을 소개했습니다. 이제 진행률 표시줄의 실용성을 이해했으므로 오늘은 다른 형태의 진행률 표시줄을 소개하겠습니다. 원형 진행 스트립.

이러한 종류의 진행률 표시줄은 페이지 로딩 및 벨소리 타이머 페이지에 적합합니다. 이 문서의 내용은 CSS3를 사용하여 순환 진행률 표시줄 효과를 얻는 방법에 대한 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 필요한 경우 참조할 수 있습니다.

Css3를 사용하여 바링 진행률 표시줄 효과의 원리를 구현하는 방법

먼저 원형 진행률 표시줄을 그려야 하는데 div 형식이 정사각형이므로 테두리 반경을 사용해야 합니다. 정사각형을 원형으로 변환합니다.
원형 진행률 표시줄은 항상 회전합니다. CSS3의 회전(deg) 문을 사용하면 이 효과를 얻을 수 있습니다.

3. 여기서는 회전(deg)의 사용법을 자세히 정리합니다.

a. Rotation: 1.rotateX(deg) //X축을 중심으로 회전

2.rotateY(deg ) //Y축 회전 r 회전 3.rotatez(deg) //z축을 기준으로 회전

B. 이동: 이동(a, b) // x, y 방향으로 A, B 픽셀 거리. 중심화는 변환(-50%,50%)을 사용하여 달성할 수 있습니다. E Translatex (a) // X 방향의 픽셀 거리를 전달합니다. E Translatey (a) // Y 방향의 픽셀 거리를 전송합니다. E Translatez (a) // z 방향의 픽셀 거리를 젠장. css3을 사용하여 막대 링 진행 막대 효과 단계 (코드)

스테프 1 : html part

<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>

로그인 후 복사

step 2 : css part

.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;
                   }
               }

로그인 후 복사

step three: js

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
        }

로그인 후 복사

구현 효과의 일부는 그림과 같습니다

위 내용은 원형 진행률 표시줄 효과를 얻는 방법은 무엇입니까? CSS3를 사용하여 순환 진행률 표시줄 효과를 구현하는 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!