css3制作圆形进度条

时间：2023-04-02 16:07:45 HTML

介绍在移动端制作一个加载图标，和以往使用的不同。它是一个圆形的进度条。圆形进度条无非是一个百分比控件。CSS3实现戒指demo最初写这个戒指的时候，参考了帖子里给出的css代码代入，然后根据自己的需要修改。发现圆环可以完美旋转，但是好像不能用百分比来控制，所以放弃了。只是复制一个现成的想法，还是要动动脑筋的。实现原理在css中实现环的方法有很多种。我想大部分都是通过边框（border）+裁剪（clip:rect()）来实现的，所以我打算用这个方法。主要是布局问题。我觉得大部分圆形进度条都差不多，就是布局和旋转方式不一样//html

//css.loading{position:固定的;顶部：50%；左：50%；溢出：隐藏；z-指数：9999；-webkit-transform:翻译(-50%,-50%);transform:translate(-50%,-50%);}.circle{-webkit-box-sizing:border-box;-moz-box-sizing：边框框；框大小：边框框；边框：10px实心#fff；clip:rect(0,100px,100px,50px);}.clip-auto{clip:rect(auto,auto,auto,auto);}.percent{-webkit-box-sizing:border-box;-moz-box-sizing：边框框；框大小：边框框；顶部：-10px；left:-10px;}.left{-webkit-transition:-webkit-transformease;过渡：-webkit-转换轻松；过渡：轻松转变；边框：10px实心#E54B00；C嘴唇：rect(0,50px,100px,0);}.right{border:10pxsolid#E54B00;clip:rect(0,100px,100px,50px);}.wth0{width:0;}//js$('.left').animate({deg:per*3.6},{step:function(n,fx){if(per>180){$('.circle').addClass('clip-auto');$('.right').removeClass('wth0');}$(this).css({“-webkit-transform”：“旋转（”+n+“deg）”，“-moz-transform”：“旋转（”+n+“deg）”，“transform”：“旋转（”+n+“deg）”});},duration:500})通过裁剪.circle（左右环的父元素）只显示左边的环，右边的环的宽度为0。当进度条达到50%，左环的旋转角度为transform:rotate(180deg)，去除.circle的裁剪。(.clip-auto)，右边环的宽度恢复基本就是这个套路。如果jQuery的动画方法animate()的step属性只用$(this).css({"-webkit-transform":"rotate("+n+"deg)","-moz-transform":"rotate("+n+"deg)","transform":"rotate("+n+"deg)"});控制角度的旋转，没有丝毫的动画效果，比较生硬。这时候就要考虑给它加上动画了，而jq提供的animate对只能为数值创建动画，而字符串类型的值不能创建动画。这时候就需要用到animate的step属性了。step引入了animate的progress属性，我们经常用它来操作数值的属性，但是不能用它来操作字符串值的属性。这时候就需要step属性了。Step，顾名思义，就是一步步分解一个动画。在animate方法中，每一步如何分解，并不是由我们设置的CSS属性值和动画时长决定的，而是由系统决定的。$(".left").animate({left:50},{duration:100,step:function(now,fx){console.log(now)//控制台输出，看这个动画是否分解成几个片段}});这个地方主要是解释为什么要给这里的angle赋值。顺便说一句，它把这个值分成多少碎片，这不是我们可以控制的。step方法的第二个参数——fx$(".demo").animate({first:2,second:10},{step:function(n,fx){//动画元素的每个动画属性一个函数动画效果执行时调用，第一个参数为当前动画正在变化的属性的实时值（每一个动画过程，都会呈现属性值的实时反馈）；第二个参数为修改Tween对象提供了一个在动画结束时改变animate第一个参数中设置的属性值的机会。//fx:jQuery.fx原型对象的引用，包含多个属性，比如as//执行动画的元素：elem;//动画正在改变的属性：prop;//正在改变的属性的当前值：now;//正在改变的属性的结束值：end;//正在改变属性的单位：unit;etc//这里可以改变动画结束时在animate的第一个参数中设置的属性second的值if(fx.prop=="second"){fx.end=5}console.log(fx.prop+":"+n);},duration:2000})在这个动画结束的时候遇到了两个知识盲区，clip的使用和jq的step属性。写这篇文章的主要目的是加深理解和分享。

上一篇：前端性能优化——reflow和redraw

下一篇：HTML基础——div与css概述

css3制作圆形进度条相关文章