用动画掩蔽一个圆圈并移动面具

Question

我有一个圆形的div，它是垂直和水平中心的div。我正在努力实现一个css动画，它似乎是从上到下渐行渐远。

我最初想把高度设为0，然后移动到50 it，但是当它处于中心位置时，它开始从中心开始创建。相反，我希望它定位到初始位置，并从上到下创建。就像只有一个正方形遮住了圆圈，没有其他东西，它往下移动。

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

我怎样才能添加方型面罩来达到下面的效果？

请注意，背景有一个梯度，所以我不能放置一个正方形，直接给它一个颜色，因此我认为我需要掩蔽他们。

​

​

​

​

​

​

​

​

如何达到这一效果？

我试过的是：

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

由于圆心，它开始从中间扩展。这不是我想要的。所以我才想到面具

Answer 1

编辑回答：

我可以通过结合图像background和background-position动画来实现这一点。

如果您将背景设置为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>

​