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

【问题标题】：Create an animatable radial mask for layered images?为分层图像创建可动画的径向蒙版？
【发布时间】：2015-08-05 23:13:14
【问题描述】：

这就是我想要做的：

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

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

example of radial mask concept

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

【问题讨论】：

这可以被修改以获得你想要的：JS Fiddle。从here得到它。
我正在研究使用剪辑蒙版和弧线的解决方案。但是，我的解决方案取决于 SVG 标记（这可能不是一个好的答案）...
这可能就是您要找的！ stackoverflow.com/questions/23385924/…

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：