Question

所以我有一个HTML和CSS文件，我想在所有资源加载完毕后显示该页面，并且我的网站上有一些动画，因此我希望它们在页面完全加载后显示出来

我尝试了另一种覆盖方式：先显示一个div，然后在页面完全加载后，然后通过javascript删除，由于动画在后台启动，用户看不到它们，因此无法通过javascript删除

所以这就是我想要的，当用户打开URL时首先向她/他显示加载页面，并且在加载所有资源时，加载逐渐消失并且CSS动画开始播放，例如，我有一个h1标签想在页面完全加载后淡入

Answer 1

您做错了什么。解决方法可能是这样的：

JS

document.addEventListener('DOMContentLoaded', applyAnimation);

function applyAnimation() {
     document.querySelector('h1').classList.add('animated-heading')
}

CSS

  .animated-heading {
    animation: 1s fade forwards;
  }

  @keyframes fade {
    to {
      opacity: 0;
    }
  }

页面完全加载后如何显示html css

1 个答案: