环形进度条效果怎么实现？
导读：这种进度条适合应用于页面加载的时候和环形计时器的页面。本篇文章给大家带来的内容是关于如何使用css3实现环形进度条效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 如何使用css3实现条环进度条效果原理 首先我们...
这种进度条适合应用于页面加载的时候和环形计时器的页面。本篇文章给大家带来的内容是关于如何使用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部分
//percent小于50时需要使用遮罩进行遮挡超出环形范围部分
剩余
'+circleData.percent+'%
步骤二：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
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 环形进度条效果怎么实现？
本文地址： https://pptw.com/jishu/664581.html