利用jQuery和CSS实现环形进度条 最近项目里遇到一个有意思的效果,那就是圆形进度条,类似于这样的: 实现类似这样的效果方法很多。我主要想了2个解决方案,都是通过 jQuery和CSS实现的,下面就一一道来: 方法一:jQuery + CSS3 实现原理 原理非常的简单,在这个方案中,最主要使用了 CSS3的transform中的rotate和CSS3的clip两个属性。用他们来实现半圆和旋转效果。 半环的实现 先来看其结构。 HTML
结构非常简单。这样的结构,大家一看就清楚。 CSS .pie_right { width:200px; height:200px; position: absolute; top: 0; left: 0; background:#0cc; } .right { width:200px; height:200px; background:#00aacc; border-radius: 50%; position: absolute; top: 0; left: 0; } .pie_right, .right { clip:rect(0,auto,auto,100px); } .mask { width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: #FFF; position: absolute; text-align: center; line-height: 150px; font-size: 20px; background: #0cc; /* mask 是不需要剪切的,此处只是为了让大家看到效果*/ clip:rect(0,auto,auto,75px); } 实现半圆还是挺简单的,利用border-radius做出圆角,然后利用clip做出剪切效果,(clip使用方法,详见站内介绍),mask的部分是为了遮挡外面的容器,致使在视觉上产生圆环的效果: 旋转的话,那更容易实现了,就是在CSS的right中加入(我没做浏览器兼容代码,请大家自行加入): .right { transform: rotate(30deg); } 这样就可以看到一个半弧旋转的效果了。 整环的实现 同样道理,拼接左半边圆环,为了让我们 html结构更易懂以后写 js更简便,我对结构做了一下改造,并作了效果优化: HTML
CSS .circle { width: 200px; height: 200px; position: absolute; border-radius: 50%; background: #0cc; } .pie_left, .pie_right { width: 200px; height: 200px; position: absolute; top...