屏蔽圆圈并使用动画移动蒙版

Question

我有一个圆形div，它在div中垂直和水平居中。我正在尝试实现一个css动画，它似乎从上到下渐渐消失。

我想最初将高度设为0并移动到50px，但是当它居中时，它开始从中心创建。相反，我希望它能够定位到初始位置，并从上到下创建它。就像有一个正方形只掩盖圆圈而没有别的东西，它会向下移动。

#circle {
   width: 80px;
   height: 80px;
   border-radius: 50px;
}

如何添加方形蒙版以达到以下效果？

请注意背景有渐变，所以我不能放置正方形并直接为它指定颜色，因此我认为我需要掩盖它们。

如何达到这个效果？

我尝试过：

@keyframes example {
   from {height: 0}
   to {height: 80px}
}

当圆圈居中时，它会从中间开始扩展。这不是我想要的。这就是我想到面具的原因

Answer 1

编辑回答：

我可以通过图片background和background-position动画的组合来实现这一目标。

如果您将背景设置为#fff之类的CSS颜色，则无效。 需要是图像或渐变。您还需要将background-repeat设置为no-repeat

动画只是以div显示区域的背景 out 开始，然后将背景向下拉到显示区域。

请全屏查看示例。

工作代码段（jpeg图片作为对象背景）：

body {
  background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
  margin: 0 auto;
  height: 120vh;
  overflow: hidden;
}

.sun {
  height: 400px;
  width: 400px;
  border-radius: 100vw;
  margin: 5em auto;
  animation-name: sunrise;
  animation-duration: 10s;
  animation-delay: .5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  background: url(https://image.ibb.co/eVdQ3Q/white.jpg);
  background-repeat: no-repeat;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes sunrise {
  from {
  opacity: 1;
    background-position: 0 -700px;
  }
  to {
  opacity: 1;
    background-position: 0 0px;
  }
}

<div class="sun"></div>

工作代码段（渐变作为对象背景）：

body {
  background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
  margin: 0 auto;
  height: 120vh;
  overflow: hidden;
}

.sun {
  height: 400px;
  width: 400px;
  border-radius: 100vw;
  margin: 5em auto;
  animation-name: sunrise;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  background: linear-gradient(white,white);
  background-repeat: no-repeat;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes sunrise {
  from {
  opacity: 1;
    background-position: 0 -700px;
  }
  to {
  opacity: 1;
    background-position: 0 0px;
  }
}

<div class="sun"></div>