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

Question

这是我正在尝试做的:

我有两个相互堆叠的圆形 SVG 图像。顶部图像是灰度图。底部图像是全彩的。

我想要做的是，通过 1-100 的百分比，删除顶部图像，就像指针根据数字扫过钟面一样。假设我是 25%。从 12 点钟到 3 点钟，灰度图像会像饼楔一样消失)，显示出下面相同的全彩色图像。 (看图片更清楚)。

example of radial mask concept

这可能与 HTML5/CSS 相关吗？查询？我没有考虑的其他方式？

Answer 1

这是我想出的 fiddle http://jsfiddle.net/3a5eubcv/ .基本上你的背景图像将是红色圆圈，然后你有 2 个蒙版漂浮在它上面(具有半透明背景的 div)。很抱歉没有为它添加 javascript，但是对于你 25% = transform:rotate(90deg);。当你达到 50% 时，右边的 mask 应该停止，左边的 mask 应该继续。 75% = .circle-mask-right{transform:rotate(180deg); .circle-mask-left{transform:rotate(90deg);} 。我相信代码可以简化，但希望这可以帮助你。