从屏幕左上角展开圆形动画答案

【问题标题】：Expand circle animation from top left corner of the screen从屏幕左上角展开圆形动画
【发布时间】：2021-09-26 08:02:22
【问题描述】：

我正在尝试制作一个从屏幕左上角扩展到整个屏幕的圆形动画。

我让它按预期工作，但来自页面中心：

@keyframes anim {
 0% { clip-path: circle(0% at 50% 50%); }
 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;
}

&lt;div id="backdrop"&gt;&lt;/div&gt;

【问题讨论】：

标签： css css-animations css-transitions

【解决方案1】：

请如下更改您的关键帧。你的圈子是从页面中心的50% 50% 开始的。

0% {
clip-path: circle(0% at 0% 0%);
}

【讨论】：

【解决方案2】：

.full {
    width: 100vw;
    height: 150px;
    background: red;
    animation-name: anim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


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

<div class="full"></div>

【讨论】：

添加关于您提供的代码的简短描述