应用CSS3完成环状进度条实际效果

日期:2021-01-20 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

进度条实际效果以下:

整圆的实际效果解决会简易些,不详细环完成起来细节多一点。下边是完成逻辑性和全过程。

进度条构成:

环状:两种色调进度条,当余量少于50%时进度条色调由翠绿色变成黄色。进度条构造由两个叠加环状构成;上叠加环状展现剩下量,深色;下叠加环状展现100%总量,浅色系。

款式完成:

1:画1个方形,如图中黑影一部分所示:

 

2:方形中画两个等大平均分方形的矩形框,(留意每一个矩形框1定要设定:overflow:hidden)如图中黑影一部分所示:

3:进度条由两个叠加环状构成,因此第1步的方形中必须画4个等大的矩形框用来展现不一样一部分的环状。

4:每一个矩形框中画1个和父级方形等大的方形,用来展现环状,左半矩形框中的环状只设定上边框和左侧框;右半矩形框中的环状只设定上边框和右侧框,如图中黑影所示:

5:完成进度条的动态性百分比进度,应用css3的transform:rotate将上叠加环状依据具体百分比换算成具体的转动角度来完成。

 当剩下量超过50%时左边上叠加环状转动角度无需变,仅有测算右测上叠加环状转动角度便可。

 当剩下量小于百分之50%时,左边上叠加环状转动时,就会将左半环状展现为详细的半环,此时就必须1个用来遮挡左边超过进度范畴环状一部分的左边环;以下图所示:

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,被遮挡环色调值深有光晕,必须将角度开展微调(⑴91deg)开展彻底遮挡
                               -webkit-transform:rotate(⑴91deg);
                           }
                       }
                   }
                   &.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(⑴5deg);
                       }
                   }
                   .right{
                       right:0;
                   }
                   .left{
                       left:0;
                   }
                   .num{
                       position: absolute;left:50%;top:50%;
                       width:.5rem;
                       transform:translate(⑸0%,⑸0%);
                       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 = ⑴5⑴80+150*(percent*2)/100;   
                rightRotate = ⑴35;
            }else{
                leftRotate = ⑴5;
                rightRotate = ⑴35+(150*((percent⑸0)*2)/100);   //占比在半环测算必须*2倍
            }
            circleData = {
                leftRotate:leftRotate,  //左半环进度
                rightRotate:rightRotate, //右半环进度
                halfClassName:halfClassName, //50% 进度环 变色
                leftCircleDisplay:leftCircleDisplay, //左半环遮罩
                percent:per  //进度百分比
            }
            return circleData
        }

 环状转动角度换算必须依据不一样要求开展微调便可。
 

总结

以上所述是网编给大伙儿详细介绍的应用CSS3完成环状进度条实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:正确了解CSS中的margin合拼的用法 返回下一篇:没有了