改变背景颜色的高度

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>