您的位置：首页 > Web前端 > > 正文

css3右侧栏伸缩效果（使用CSS3实现环形进度条效果）

更多时间：2022-03-28 13:43:35 类别：Web前端浏览量：124

css3右侧栏伸缩效果

使用CSS3实现环形进度条效果

进度条效果如下：

整圆的效果处理会简单些，不完整环实现起来细节多点。下边是实现逻辑和过程。

进度条组成：

环形：两种颜色进度条，当余量少于50%时进度条颜色由绿色变为黄色。进度条结构由两个叠加环形组成；上叠加环形展示剩余量，深色；下叠加环形展示100%总量，浅色。

样式实现：

1：画一个方形，如图中阴影部分所示：

css3右侧栏伸缩效果（使用CSS3实现环形进度条效果）

2：方形中画两个等大均分方形的矩形，(注意每个矩形一定要设置：overflow:hidden)如图中阴影部分所示：

css3右侧栏伸缩效果（使用CSS3实现环形进度条效果）

3：进度条由两个叠加环形组成，所以第一步的方形中需要画四个等大的矩形用来展示不同部分的环形。

4：每个矩形中画一个和父级方形等大的方形，用来展示环形，左半矩形中的环形只设置上边框和左边框；右半矩形中的环形只设置上边框和右边框，如图中阴影所示：

css3右侧栏伸缩效果（使用CSS3实现环形进度条效果）

5：实现进度条的动态百分比进度，使用css3的transform:rotate将上叠加环形根据实际百分比换算成实际的旋转角度来实现。

当剩余量大于50%时左侧上叠加环形旋转角度不用变，只有计算右测上叠加环形旋转角度即可。

当剩余量小于百分之50%时，左侧上叠加环形旋转时，就会将左半环形展示为完整的半环，此时就需要一个用来遮挡左侧超出进度范围环形部分的左侧环；如下图所示:

css3右侧栏伸缩效果（使用CSS3实现环形进度条效果）

html代码如下：

<li class="progress_wrap js_halfClassNameObj">
    <li class="right under">
        <li class="circleProgress rightcircle"></li>
    </li>
    <li class="left under">
        <li class="circleProgress leftcircle"></li>
    </li>
    <li class="right up">
        <li class="circleProgress rightcircle js_progressRight" style="-webkit-transform:rotate('+circleData.rightRotate.toString()+'deg)"></li>
    </li>
    <li class="left up">
        <li class="circleProgress leftcircle js_progressLeft" style="-webkit-transform:rotate('+circleData.leftRotate.toString()+'deg)"></li>
    </li>
    //percent小于50时需要使用遮罩进行遮挡超出环形范围部分
    <li class="left up_left_cover js.jpg" alt="css3右侧栏伸缩效果（使用CSS3实现环形进度条效果）" border="0" />

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.jpg" alt="css3右侧栏伸缩效果（使用CSS3实现环形进度条效果）" border="0" />

环形旋转角度换算需要根据不同需求进行微调即可。

总结

以上所述是小编给大家介绍的使用CSS3实现环形进度条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持！

标签：进度条环形 CSS3

上一篇：python微信支付接口（Python提取支付宝和微信支付二维码的示例代码）

下一篇：goweb框架哪个用的最多（教你搭建一个简单的Go Web服务器）

您可能感兴趣

css3右侧栏伸缩效果（使用CSS3实现环形进度条效果）

css3右侧栏伸缩效果

热门推荐

排行榜