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

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

1 个答案: