法一 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);
}
}