css - 使用 CSS : how to do a radial wipe transition or animation to transparent bg

Question

我正在尝试制作径向删除(不是饼图/圆形效果)的动画，其中背景颜色被从视口(viewport)的 0% 缩放到 100% 的透明圆形元素删除，显示出背景图像。也许这两个图像会澄清。

提前感谢您的任何建议，

威士忌 T.

Answer 1

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

我向设计师致敬，他建议使用带有浅蓝色背景颜色的 svg 元素，并在中心切出一个 donut 孔。因此，我发现需要添加一个 mask 元素来覆盖孔，通过 css 转换，它与深蓝色圆圈交叉淡入淡出并仔细计时，以便孔永远不会暴露，因此背景图像也不会暴露。最后， donut svg 通过缩放转换为默​​认大小的几倍(100%、100%)，以便它向外扩展，露出 bg 图像。