Question

我正在尝试创建一个不同的加载动画（显示内容）。我设法让它在桌面上运行得很好，但它并不想在手机上运行良好。在移动设备上，它会晃动或者当它确实赶上时动画已经完成。

动画只有2个div：

<div id="loader-wrapper">
  <div class="loader-background"></div>
</div>

CSS就像这样：

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader-wrapper .loader-background {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #000000;
}

#loader-wrapper .loader-background::after {
  content: "";
  position: absolute;
  border-radius: 100%;
  top: -750px;
  right: 0;
  width: 2000px;
  height: 2000px;
  box-shadow: 0 0 0 20000px #000000;
  transition: all 3s;
  transform: scale(0.1);
  opacity: 1;
  /* Start off-screen */
}

.loaded #loader-wrapper {
  visibility: hidden;
}

.loaded #loader-wrapper .loader-background::after {
  transform: scale(1);
  opacity: 0;
}

我在代码笔上创建了这个，所以你可以看到它的实际效果：

https://codepen.io/r3plica/pen/rwLagV

有没有人知道我可以在没有抽搐动作的情况下使用它的方法？

动画在移动设备上抖动，有时根本不工作

0 个答案: