为分层图像创建可设置动画的放射状遮罩

Create an animatable radial mask for layered images?

本文关键字：放射状动画设置分层图像创建更新时间：2023-09-26

以下是我要做的：

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

我想做的是，通过1-100的百分比，删除顶部的图像，就像手根据数字扫过时钟的表面一样。假设我是25%。从12点到3点，灰度图像将像扇形楔一样消失），从而显示下面相同的全色图像。（请参阅图片以获得更多清晰度）。

径向掩模概念示例

这可能与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);}。我相信代码可以简化，但希望这能让你继续前进。