css3右侧栏伸缩效果(使用CSS3实现环形进度条效果)
类别:Web前端 浏览量:124
时间:2022-03-28 13:43:35 css3右侧栏伸缩效果
使用CSS3实现环形进度条效果进度条效果如下:
整圆的效果处理会简单些,不完整环实现起来细节多点。下边是实现逻辑和过程。
进度条组成:
环形:两种颜色进度条,当余量少于50%时进度条颜色由绿色变为黄色。进度条结构由两个叠加环形组成;上叠加环形展示剩余量,深色;下叠加环形展示100%总量,浅色。
样式实现:
1:画一个方形,如图中阴影部分所示:
2:方形中画两个等大均分方形的矩形,(注意每个矩形一定要设置:overflow:hidden)如图中阴影部分所示:
3:进度条由两个叠加环形组成,所以第一步的方形中需要画四个等大的矩形用来展示不同部分的环形。
4:每个矩形中画一个和父级方形等大的方形,用来展示环形,左半矩形中的环形只设置上边框和左边框;右半矩形中的环形只设置上边框和右边框,如图中阴影所示:
5:实现进度条的动态百分比进度,使用css3的transform:rotate将上叠加环形根据实际百分比换算成实际的旋转角度来实现。
当剩余量大于50%时左侧上叠加环形旋转角度不用变,只有计算右测上叠加环形旋转角度即可。
当剩余量小于百分之50%时,左侧上叠加环形旋转时,就会将左半环形展示为完整的半环,此时就需要一个用来遮挡左侧超出进度范围环形部分的左侧环;如下图所示:
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实现环形进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
您可能感兴趣
- 进度条代码大全(多步骤进度条的实现原理及代码)
- angular封装进度条组件(如何用DevUI搭建自己的Angular组件库)
- html5手机字体怎么设置(html5给汉字加拼音加进度条的实现代码)
- php上传大文件教程(PHP实现带进度条的Ajax文件上传功能示例)
- php设置上传文件代码(PHP大文件切割上传并带进度条功能示例)
- css进度条怎么设置(使用CSS实现阅读进度条)
- svg怎么在html中显示(html svg生成环形进度条的实现方法)
- 前端app开发适配消息栏(AmazeUI 加载进度条的实现示例)
- python进度条怎么实现(Python小进度条显示代码)
- css3右侧栏伸缩效果(使用CSS3实现环形进度条效果)
- html5炫酷代码(HTML5超炫酷粒子效果的进度条的实现示例)
- javascript 虚拟滚动条(JavaScript实现可拖拽的进度条)
- css3填充式进度条动画(CSS3样式linear-gradient的使用实例)
- Extjs updateProgress进度条的应用
- 小程序可滑动弧形进度条(小程序实现文字循环滚动动画)
- canvas绘图画圆基本步骤(利用 Canvas实现绘画一个未闭合的带进度条的圆环)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
热门推荐
- 如何让tomcat启动更快(快速解决Tomcat启动慢的问题,超简单)
- web服务器的配置教程(Web服务器硬件配置改如何选择?)
- webpack打包后css路径(Webpack 中 css import 使用 alias 相对路径的方法)
- C#中TryParse的用法
- python读取文件怎么用(Python基础之文件读取的讲解)
- dedecms时间代码(Dedecms中常用数据调用的sql语句汇总)
- 查询按照部门分组的mysql语句(Mysql根据某层部门ID查询所有下级多层子部门的示例)
- python函数调用传递数组数据(python调用c++传递数组的实例)
- 自定义ui组件的三个重要方法(AmazeUI 面板的实现示例)
- python面向对象基本思想(详解Python:面向对象编程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9