像这样的圆环进度图形，如果纯用 CSS 来实现，大家有什么好思路么？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 4536 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://dribbble.com/shots/629733-App-UI-elements?list=following

纯用

CSS

圆环

27 条回复 • 1970-01-01 08:00:00 +08:00

zythum

2012-07-04 17:38:22 +08:00

这个。必须有个canvas.. 不然真没办法做出个扇形...

cutehalo

2012-07-04 17:41:27 +08:00

这个 http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/ ？

cutehalo

2012-07-04 17:46:36 +08:00

or 这个 http://attasi.com/labs/volume/ ？

benzhe

2012-07-04 17:50:34 +08:00

http://nipponcolors.com 打开右侧的 On 后，左侧的颜色环在切换颜色的时候会有 CSS 动画

Mak

2012-07-04 17:57:48 +08:00

用 transform: matrix(......); 可以畫一個一角指向圓心的菱形，然後圓外面到部分用遮罩蓋起來就可以了。

麻煩的是遮罩層的邊框必須用圖片才能實現最外面哪個上黑下白漸變的「圓邊框」。

zythum

2012-07-04 18:01:49 +08:00

@benzhe 我懂了。用蒙板加旋转，还要做成左右两边的。等下有空做个demo

zythum

2012-07-04 18:05:25 +08:00

突然一想，貌似不用蒙板也能做。吃完饭做个demo

zythum

2012-07-04 18:07:57 +08:00

@Mak 这个办法不好。只能做凸多边型，如果大于180度就不行了。

benzhe

2012-07-04 18:18:58 +08:00

@Mak 可以用 radial-gradient

yqrm

2012-07-04 18:27:53 +08:00

@cutehalo http://tutorialzine.com/ 这个站很不错，收藏了，感谢

zythum

2012-07-04 18:30:16 +08:00

radial-gradient 是做圆心向外这么个方向的渐变是做不错扇形的。

bitsmix

2012-07-04 18:47:51 +08:00

http://widgets.better2web.com/loader/

911

2012-07-04 19:00:42 +08:00

http://anthonyterrien.com/knob/

houkanshan

2012-07-04 19:23:51 +08:00

try this？
http://liumiao.me/html/wd/W3C/262.html
css3 + js

zythum

2012-07-04 19:43:50 +08:00

@houkanshan 和我实现实现的方式类似。但是用两个拼的话css transition怎么做过度呢。只能用js setTimeout或者祯动画做过度了

houkanshan

2012-07-04 19:49:25 +08:00

@zythum 嗯，原作者就是setTimeout过度的，实际上他的rotate都是setInterval控制的。。。
如果能用帧动画就更好了

benzhe

2012-07-04 19:54:53 +08:00

@zythum 抱歉误解了 @Mak 的意思，不过 border 的问题可以用 line-gradient 的 background 和 border-radius 解决。
我也尝试在做 DEMO, 不过卡住了，因为发现进度条首尾也有小渐变，看来不用图片不行了？

endintro

2012-07-04 20:02:48 +08:00

http://css-tricks.com/examples/ShapesOfCSS/ 里的Pac-Man + css3 transform rotate？

zythum

2012-07-04 20:08:04 +08:00

http://zythum.free.bg/circlerange/

纯css实现了,没图片，没用canvas。但是没做过度动画。等下整理下做个以后可以扩展的

zythum

2012-07-04 20:17:29 +08:00

@benzhe 可以不通图片的。你看下我写的demo就可以了。
@houkanshan 看看能不能做个大小可以自适应的样式

benzhe

2012-07-05 00:52:22 +08:00

@zythum 洗完澡我也做了一个 http://jsfiddle.net/DcYAb/

benzhe

2012-07-05 00:56:51 +08:00

上一个没保存....

http://jsfiddle.net/ben304/JZnD2/

zythum

2012-07-05 01:11:13 +08:00

good job

benzhe

2012-07-05 01:18:08 +08:00

@zythum 做了这么个东西深切体会到什么是山寨：样子有点像，可就是没有任何美感，动画也不顺畅...

zythum

2012-07-05 01:58:59 +08:00

这个只是个实现过程。不能说是山寨... 样子什么的是设计。动画流畅么.那就要动脑子了...

benzhe

2012-07-05 02:18:56 +08:00

@zythum 呃，我在说我做的那个...我说话才不会这么不客气...

zythum

2012-07-05 03:40:40 +08:00

@benzhe ...话说我那个样子还不如你那个呢... ^ ^