这是我正在尝试做的事情：

我有两个圆形SVG图像堆叠在一起.顶部图像是灰度.底部图像是全彩色的.

我想做的是,通过1-100％的百分比,移除顶部图像,就像根据数字扫过时钟的手一样.假设我的比例为25％.从12点到3点,灰度图像将像饼图一样消失,显示下面相同的全彩图像. (更清晰地看图像).

example of radial mask concept

这可能与HTML5 / CSS有关吗？ JQuery的？我不考虑其他方式？

最佳答案 这是我提出的
http://jsfiddle.net/3a5eubcv/的一个小提琴.基本上你的背景图像将是红色圆圈然后你有两个漂浮在它上面的面具(具有半透明背景的div).很抱歉没有为它添加javascript,但对你来说25％= transform：rotate(90deg);当你达到50％时,右边的面具应该停止,左边的面具应该继续. 75％= .circle-mask-right {transform：rotate(180deg); .circle-mask-left {transform：rotate(90deg);}.我确定代码可以简化,但希望这可以让你前进.