介绍 <李> & lt; div类=皃rogress_wrap js_halfClassNameObj"比;
& lt; div类=坝襲nder"祝辞
& lt; div类=癱ircleProgress rightcircle"祝辞& lt;/div>
& lt;/div>
& lt; div类=白髐nder"祝辞
& lt; div类=癱ircleProgress leftcircle"祝辞& lt;/div>
& lt;/div>
& lt; div类=坝襲p"祝辞
& lt; div类=癱ircleProgress rightcircle js_progressRight"
风格=?webkit-transform:旋转(& # 39;+ circleData.rightRotate.toString() + & # 39;度)“祝辞& lt;/div>
& lt;/div>
& lt; div类=白髐p"祝辞
& lt; div类=癱ircleProgress leftcircle js_progressLeft"
风格=?webkit-transform:旋转(& # 39;+ circleData.leftRotate.toString() + & # 39;度)“祝辞& lt;/div>
& lt;/div>//小百分比于50时需要使用遮罩进行遮挡超出环形范围部分
& lt; div类=白髐p_left_cover js_giftLeftCover"风格=跋允?& # 39;+ circleData.leftCircleDisplay + & # 39;“比;
& lt; div类=癱ircleProgress leftcircle color_border_t_l04"祝辞& lt;/div>
& lt;/div>
& lt; div类=皀um"祝辞
& lt; div>剩余& lt;/div>
& lt; div类=癹s_giftPercent"祝辞& # 39;+ circleData.percent + & # 39; % & lt;/div>
& lt;/div>
& lt;/div> .progress_wrap {
位置:相对;
保证金:0 0 0 .14rem;
宽度:.92rem;高度:.92rem;//和更用来展示黄色和绿色的效果
又过,{
.under {
.rightcircle .leftcircle {
border-top: progress_border_under_little美元;
}
.rightcircle {
边境:progress_border_under_little美元;
}
.leftcircle {
border-left: progress_border_under_little美元;
}
}
.up {
.rightcircle .leftcircle {
border-top: progress_border_up_little美元;
}
.rightcircle {
边境:progress_border_up_little美元;
}
.leftcircle {
border-left: progress_border_up_little美元;
}
}//用遮挡实现左侧剩余百分比,遮住超出环形范围部分;核心是使用同心圆进行边框进行遮挡
.up_left_cover {
宽度:.47rem;高度:.92rem;
.leftcircle {
上图:-.02rem;
宽度:.74rem;高度:.74rem;
边界:。11 rem固体透明;
border-top: progress_border_up_left_cover_little美元;
border-left: progress_border_up_left_cover_little美元;//实际值为195度,被遮挡环颜色值深有光晕,需要将角度进行微调(-191度)
进行完全遮挡
-webkit-transform:旋转(-191度);
}
}
}
,更{
.under {
.rightcircle .leftcircle {
border-top: progress_border_under美元;
}
.rightcircle {
边境:progress_border_under美元;
}
.leftcircle {
border-left: progress_border_under美元;
}
}
.up {
.rightcircle .leftcircle {
border-top: progress_border_up美元;
}
.rightcircle {
边境:progress_border_up美元;
}
.leftcircle {
border-left: progress_border_up美元;
}
}
}
对不对,.left {
位置:绝对的,最高:0;溢出:隐藏;
宽度:.46rem;高度:.92rem;
.circleProgress {
位置:绝对的;上图:0;
宽度:.78rem;高度:.78rem;
边界:。07年rem固体透明;这个特性:50%;
}
.rightcircle {
右:0;
-webkit-transform:旋转(15度);
}
.leftcircle {
左:0;
-webkit-transform:旋转(-15度);
}
}
铃声{
右:0;
}
.left {
左:0;
}
.num {
位置:绝对的,左:50%;:50%;
宽度:.5rem;
变换:翻译(-50%,-50%);
字体大小:.12rem;颜色:public_auxiliary_col美元;text-align:中心;行高:.26rem;
}
}
小编给大家分享一下用css3如何实现环形进度条效果,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
这种进度条适合应用于页面加载的时候和环形计时器的页面。本篇文章给大家带来的内容是关于如何使用css3实现环形进度条效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
首先我们需要画出圆形进度条,但是div格式都是方形的,这就需要用到border - radius将方形转换成圆形。
圆形的进度条一直处于旋转的状态,我们可以引用css3里面的rotage(度)语句实现这一效果。
<强>,3。这里我们详细梳理一下rotage(度)的用法 <强>,,,
。旋转:1. rotatex(度)//绕x轴旋转
2. rotatey(度)//绕Y轴旋转
3。rotateZ(度)//绕Z轴旋转
b。平移:翻译(a, b)//在x, y方向平移a, b像素距离。利用翻译(-50%,50%)可以实现居中。
translateX (a)//在x方向平移一个的像素距离。
translateY (a)//在y方向平移一个的像素距离。
translateZ (a)//在Z方向平移一个的像素距离。
<强>步骤一:HTML部分
<强>步骤二:css部分
