本文由 DTcms素材网 – DT素材网 发布,转载请注明出处,如有问题请联系我们!环形进度条效果怎么实现?用css3实现环形进度条效果代码示例

收藏

上一篇文章我们介绍了如何使用css3实现条形进度条效果(附完整代码),了解到进度条的实用性,那么今天来向大家介绍一下另外一种形式的进度条:环形进度条。

这种进度条适合应用于页面加载的时候和环形计时器的页面。本篇文章给大家带来的内容是关于如何使用css3实现环形进度条效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

如何使用css3实现条环进度条效果原理

  1. 首先我们需要画出圆形进度条,但是div格式都是方形的,这就需要用到border-radius将方形转换成圆形。

  2. 圆形的进度条一直处于旋转的状态,我们可以引用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部分

<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('+circleData.rightRotate.toString()+'deg)"></div>     </div>     <div class="left up">         <div class="circleProgress leftcircle js_progressLeft"          style="-webkit-transform:rotate('+circleData.leftRotate.toString()+'deg)"></div>     </div>     //percent小于50时需要使用遮罩进行遮挡超出环形范围部分     <div class="left up_left_cover js_giftLeftCover" style="display:'+circleData.leftCircleDisplay+'">         <div class="circleProgress leftcircle color_border_t_l04"></div>     </div>     <div class="num">         <div>剩余</div>         <div class="js_giftPercent">'+circleData.percent+'%</div>     </div> </div>

步骤二:css部分

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

步骤三: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实现环形进度条效果代码示例

标签
DT素材网

DT素材网

165

0

0

( 此人很懒并没有留下什么~~ )