遮盖圆圈并使用动画移动遮罩

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 动画来实现这一点。

如果您将背景设置为 CSS 颜色，如 #fff，这将 不起作用 。它需要是图像或渐变。您还需要将 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>

遮盖圆圈并使用动画移动遮罩

Masking a circle and moving the mask with animation

html

css

mask

css-animations