为分层图像创建一个可动画的径向蒙版？

Question

这是我想要做的事情：

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

我想要做的是，通过1-100％的百分比，移除顶部图像，就像根据数字扫过时钟表面的手一样。让我们说我25％。从12点钟到3点钟，灰度图像将像饼图一样消失，显示下面相同的全彩图像。 （见图更清晰）。

example of radial mask concept

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

Answer 1

这是我想出的http://jsfiddle.net/3a5eubcv/的小提琴。基本上你的背景图像将是红色圆圈然后你有两个漂浮在它上面的面具（具有半透明背景的div）。很抱歉没有为它添加javascript，但对你来说25％= transform:rotate(90deg);。当你达到50％时，正确的面具应该停止，左边的面具应该继续。 75％= .circle-mask-right{transform:rotate(180deg); .circle-mask-left{transform:rotate(90deg);}。我确信代码可以简化，但希望这可以帮助您实现目标。