javascript - 点击后圆圈覆盖整个屏幕

Question

https://object.design

当点击它的菜单按钮时，上面给出的网站有一个有趣的动画。我尝试了很多但未能制作这样的动画。单击时小圆圈会扩大并覆盖整个屏幕。请帮忙 ！！！

标签： javascriptjqueryhtmlcss

Answer 1

如果您在 chrome 检查器中注意到，该效果是使用带有 clip-path 属性的 css 完成的。使用这些值，您将看到圆的大小和位置如何变化。

clip-path: circle(150% at calc(100% - 25px - var(--page-component-margin,20px)) calc(25px + var(--page-component-margin,20px)));

我希望它对你有帮助！