环形进度条效果怎么实现?

2024-01-17 13:43 小编
   这种进度条适合应用于页面加载的时候和环形计时器的页面。本篇文章给大家带来的内容是关于如何使用css3实现环形进度条效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
    如何使用css3实现条环进度条效果原理
    首先我们需要画出圆形进度条,但是div格式都是方形的,这就需要用到border-radius将方形转换成圆形。
    圆形的进度条一直处于旋转的状态,我们可以引用css3里面的rotage(deg)语句实现这一效果。
    3.这里我们详细梳理一下rotage(deg)的用法
    a.旋转:1.rotateX(deg)//绕x轴旋转
    2.rotateY(deg)//绕Y轴旋转
    3.rotateZ(deg)//绕Z轴旋转
    b.平移:translate(a,b)//在x,y方向平移a,b像素距离。利用translate(-50%,50%)可以实现居中。
    translateX(a)//在X方向平移a的像素距离。
    translateY(a)//在Y方向平移a的像素距离。
    translateZ(a)//在Z方向平移a的像素距离。
    如何使用css3实现条环进度条效果步骤(代码)
    步骤一:HTML部分
    <divclass="progress_wrapjs_halfClassNameObj">
    <divclass="rightunder">
    <divclass="circleProgressrightcircle"></div>
    </div>
    <divclass="leftunder">
    <divclass="circleProgressleftcircle"></div>
    </div>
    <divclass="rightup">
    <divclass="circleProgressrightcirclejs_progressRight"
    style="-webkit-transform:rotate('+circleData.rightRotate.toString()+'deg)"></div>
    </div>
    <divclass="leftup">
    <divclass="circleProgressleftcirclejs_progressLeft"
    style="-webkit-transform:rotate('+circleData.leftRotate.toString()+'deg)"></div>
    </div>
    //percent小于50时需要使用遮罩进行遮挡超出环形范围部分
    <divclass="leftup_left_coverjs_giftLeftCover"style="display:'+circleData.leftCircleDisplay+'">
    <divclass="circleProgressleftcirclecolor_border_t_l04"></div>
    </div>
    <divclass="num">
    <div>剩余</div>
    <divclass="js_giftPercent">'+circleData.percent+'%</div>
    </div>
    </div>
    步骤二:css部分
    .progress_wrap{
    position:relative;
    margin:000.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:.11remsolidtransparent;
    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:.07remsolidtransparent;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;
    }
    }
    步骤三:js部分
    functiongiftCircleProgressFn(per){
    varcircleData={};
    varpercent=parseInt(per);
    //领取进度环形颜色className
    varhalfClassName=percent<50?"little":"more";
    //左半环遮罩层显示样式状态
    varleftCircleDisplay=percent<50?"block":"none";
    varleftRotate=0;
    varrightRotate=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//进度百分比
    }
    returncircleData
    }


Tag: 怎么 效果
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码