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

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; } 
}