css - 加载动画并锁定页面上的所有元素

我在网站上添加了加载用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%; }}

最佳答案

尝试更改最后一个关键帧上的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; }
}