使用CSS：如何进行径向划像过渡或动画到透明bg

Question

我正在尝试设置径向划像（不是饼图/旋转效果）的动画，其中bg颜色被透明圆形元素从视口的0到100％缩放，从而显示bg图像。也许这两个图像会澄清。

提前感谢任何建议，

Whiskey T。

Answer 1

以防有人发现这个问题并想知道我们是如何解决这个问题的：

我的帽子给了设计师，他建议使用带有浅蓝色背景颜色的svg元素，并从中心切出一个甜甜圈洞。因此我发现需要添加一个遮盖孔的掩模元素，通过css过渡，用较深的蓝色圆圈交叉渐变并仔细计时，这样孔就不会暴露，因此背景图像不会曝光。最后，甜甜圈svg通过比例转换为默认大小的几倍（100％，100％），使其向外扩展，露出bg图像。