如何给你的页面添加一个逐渐从黑屏中显示的动画·css方案

法一 div遮盖层

为了在加载动画的时候做出一个黑屏遮盖层逐渐隐去的效果
可考虑以下css方案

        <div class="imgFath" style="overflow: hidden;">
        <!-- <div style="position:relative"> -->
          <div class="BackBlack"></div>
          <div id="imgMain1" .....

.BackBlack{
  position: absolute;
  height: 100vh;
  width: 100%;
  animation-name: blackBack;
  animation-iteration-count: 1;
  animation-duration: 4s; // 动画完成时间
  animation-delay: 0s;
  animation-fill-mode:forwards;
  z-index: 5; // 高于想要遮盖住的背景 设置所有被遮盖的元素小于5	
}

@keyframes blackBack {
  0%{
    background-color: black;
    opacity: 1;
  }
  100%{
    background-color: black;
    opacity: 0; // 逐渐消失
    display: none;
  }
}

法二 使用亮度css选项

@keyframes backgroundFadeIn {
  0%{
    filter: brightness(0);
  }
  50%{
    filter: brightness(0.5);
  }
  100%{
    filter: brightness(1);
  }
}