改變背景顏色的高度

Question

從現在開始我已經閱讀了幾個小時，即使提出正確的問題，我也可能有問題。 我要實現的是：在10秒的時間內將主頁背景高度從0更改為100％，因此1秒后背景色獲得10％的頁面高度，2秒后獲得20％的頁面高度，依此類推。 頁面加載后應該開始更改。 它可能是jquery，css或某些外部庫，只是希望它能工作。

Answer 1

像這樣嗎

body {
  width: 100vw;
  height: 100vh;
  position: relative;
  &::before {
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    background: red;
    height: 0;
    z-index: 0;
    animation-fill-mode: forwards;
    animation-name: expand;
    animation-duration: 10s;
  }
}

@keyframes expand {
    from { height: 0; }
    to { height: 100%; }
}

因此，基本上，您在內容下方添加了另一層，該層將動畫顯示頁面的高度10秒鍾（動畫持續時間）

工作的JSFiddle： https ://jsfiddle.net/y4kpcmjc/2/

Answer 2

來自官方的jQuery文檔

.animate（）方法允許我們在任何數字CSS屬性上創建動畫效果。 唯一需要的參數是CSS屬性的普通對象。 該對象與可以發送給.css（）方法的對象類似，不同之處在於屬性的范圍更具限制性。

這是例子

<img id="image" src="..." />
...
<script>
$(document).ready(function() {
    $('#image').css('height', '0');
    $('#image').animate({
        height: "100%"
    }, 10000, function() {
       //Finished loading
    });

})
</script>