加载动画并锁定页面

Question

上的所有元素

我在我的网站上添加了加载用CSS代码准备的动画。我遇到了一个问题，因为当动画结束时，页面上的所有内容都被锁定，任何事情都不会被点击。

.loader2 { 
    height: 100%; 
    position: absolute; 
    top: 0; 
    z-index: 400; 
    width: 100%; 
    -webkit-animation: loader2 2s linear 0s; 
    -moz-animation: loader2 2s linear 0s; 
    -o-animation: loader2 2s linear 0s; 
    animation: loader2 2s linear 0s; 
} 

@-webkit-keyframes loader2{ 0%{ background-color: #0000FF; opacity: 1; } 
100%{ background-color: #ffffff; opacity: 0; }} 

和HTML（在代码的底部）：<div class="loader2"></div>

我解决了这个问题，但它增加了额外的动画，我不需要。

@-webkit-keyframes loader2{ 0%{ background-color: #0000FF; opacity: 1; width: 100%; } 
100%{ background-color: #ffffff; opacity: 0; width: 0%; }} 

Answer 1

尝试改变的最后一个关键帧的z-index属性，设置为负值

@-webkit-keyframes loader2{ 
    0% { background-color: #0000FF; opacity: 1; z-index: 400; } 
    99.9% { background-color: #ffffff; opacity: 0; z-index: 400; } 
    100% { z-index: -1; } 
}