如何将中心扩散CSS圆形动画改为从左上角展开至全屏效果

你只需要修改@keyframes规则中0%状态的clip-path圆心坐标，将原本代表中心的50% 50%替换为代表左上角的0% 0%即可实现需求。

修改后的完整代码如下：

@keyframes anim {
  0% { clip-path: circle(0% at 0% 0%); }
  100% { clip-path: circle(150%); }
}

#backdrop {
  background-color: #1B1B1B;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  z-index: 10;
  animation-name: anim;
  animation-duration: 1s;
  animation-iteration-count: 1;
  /* 可选添加：避免动画结束后回弹到初始状态 */
  /* animation-fill-mode: forwards; */
}

<div id="backdrop"></div>

原理解释 #

clip-path: circle()语法中at后跟随的两个值分别为圆心的水平、垂直坐标：

• 水平坐标0%对应屏幕最左侧，100%对应最右侧
• 垂直坐标0%对应屏幕最顶部，100%对应最底部
  设置为0% 0%就可以让圆形从左上角顶点开始向外扩散，150%的半径足够覆盖整个视口，不会在动画结束后残留圆角。

内容的提问来源于stack exchange，提问作者vlmdgbbgg