掩蓋一個圓圈並用動畫移動蒙版

Question

我有一個圓形的div，它以div爲縱向和橫向居中。我試圖實現一個CSS動畫，它似乎從上到下逐漸消失。

我想使高度0最初和移動到50像素的，但是因爲它是中心，它開始從中心得到創建。相反，我希望它能夠定位到初始位置，並從上到下創建。就像有一個正方形只能遮蓋圓圈，沒有別的東西，它會向下移動。

#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顯示區域的開始然後再換背景下進入顯示區域。

請您在全屏的例子。

工作段（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>