Question

我从现在开始几个小时都在阅读，即使提出正确的问题，我可能也有问题。我想要实现的是：将主页面背景高度从0改为100％，比如10s，所以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 docs

.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>

背景颜色改变它的高度负载

2 个答案: