html - 自定义 Wordpress 加载屏幕滞后

Question

我在 wordpress 网站中实现了加载动画，当 (document.readyState) 返回“完成”时我将其删除。在好的计算机中它工作正常，但在较慢的计算机中，动画看起来非常滞后。有什么办法可以针对速度较慢的计算机进行优化。

html部分：

<div id="vignette"></div>
<div id="container">
  <div id="pos">
    <div class="cube">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="shadow"></div>
    </div>
    <div class="cube">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="shadow"></div>
    </div>
    <div class="cube">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="shadow"></div>
    </div>
    <div class="cube">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="shadow"></div>
    </div>
    <div class="cube">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="shadow"></div>
    </div>
    <div class="cube">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="shadow"></div>
    </div>
    <div class="cube">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="shadow"></div>
    </div>
    <div class="cube">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="shadow"></div>
    </div>
  </div>
</div>

和CSS：

<style>
@import "compass/css3";
 .cube:nth-child(1), .cube:nth-child(1) div {
     z-index: 1;
     animation-delay: 0.0833333333s;
}
 .cube:nth-child(2), .cube:nth-child(2) div {
     z-index: 2;
     animation-delay: 0.1666666667s;
}
 .cube:nth-child(3), .cube:nth-child(3) div {
     z-index: 3;
     animation-delay: 0.25s;
}
 .cube:nth-child(4), .cube:nth-child(4) div {
     z-index: 4;
     animation-delay: 0.3333333333s;
}
 .cube:nth-child(5), .cube:nth-child(5) div {
     z-index: 5;
     animation-delay: 0.4166666667s;
}
 .cube:nth-child(6), .cube:nth-child(6) div {
     z-index: 6;
     animation-delay: 0.5s;
}
 .cube:nth-child(7), .cube:nth-child(7) div {
     z-index: 7;
     animation-delay: 0.5833333333s;
}
 .cube:nth-child(8), .cube:nth-child(8) div {
     z-index: 8;
     animation-delay: 0.6666666667s;
}
 html {
     height: 100%;
}
 body {
     background-color: #2a2a2a;
     position: relative;
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
     display: table;
     position:absolute;
     overflow-y:hidden;
}
 #pos {
     width: 304px;
     margin: 0 auto;
}
 #container {
    transition: 0.8s;
    width: 100%;
    perspective: 2200px;
    padding: 20px 60px;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    height: 100vh;
    padding-top: 42vh;
    z-index: 1000000000000;
    background-color: #2a2a2a;
}
 .cube {
    background-color: #EB9346 !important;
     width: 30px;
     height: 150px;
     position: relative;
     margin-right: 8px;
     float: left;
     transform-style: preserve-3d;
     box-shadow: 0 0 0px rgba(0, 0, 0, .0);
     animation: animCube;
    /* Safari and Chrome */
     animation-iteration-count: infinite;
}
 .cube div {
     position: absolute;
     display: block;
     width: 30px;
     height: 150px;
}
 .cube .center {
     width: 30px;
     box-shadow: 0 0 3x rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .05);
     animation: animCenter;
     animation-iteration-count: infinite;
}
 .cube .bottom {
     width: 30px;
     height: 10px;
     bottom: 0;
     transform: rotateX(90deg);
     transform-origin: center bottom;
     animation: animBottom;
     animation-iteration-count: infinite;
}
 .cube .left {
     left: 0;
     transform: rotateY(90deg);
     transform-origin: left center;
     animation: animSide;
     animation-iteration-count: infinite;
}
 .cube .right {
     right: 0;
     transform: rotateY(-90deg);
     transform-origin: right center;
     animation: animSide;
     animation-iteration-count: infinite;
}
 .cube .left, .cube .center, .cube .right, .cube .bottom, .cube {
     animation-duration: 1s;
     animation-timing-function: ease-in-out;
}
 .left, .right {
     background-color: #2a2a2a;
     background-image: top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0);
}
 .center {
     background-color: #2a2a2a;
     background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}
 .bottom {
     background-color: #2a2a2a;
     background-image: linear-gradient(bottom, rgba(255, 255, 255, 00), rgba(255, 255, 255, 0));
}
 @keyframes animCube {
     30% {
         transform: translateZ(150px) translatex(0) translateY(0) rotatex(3deg) rotatey(0deg) rotateZ(0deg);
         box-shadow: 0 0 20px rgba(0, 0, 0, .5), 0 12px 20px 1px rgba(0, 0, 0, .5);
    }
     100% {
         transform: translateZ(0px) rotatez(0deg);
         box-shadow: 0 0 30px rgba(0, 2, 0, .0), 0 0 0 0 rgba(0, 0, 0, 0);
    }
}
 @keyframes animSide {
     30% {
         width: 100px;
         background-color: #c97f3e;
    }
     95% {
         width: 10px;
    }
}
 @keyframes animBottom {
     30% {
         height: 100px;
    }
     95% {
         height: 10px;
    }
}
 @keyframes animCenter 
/* Safari and Chrome */
 {
     20% {
         background-color: #eb9346;
         box-shadow: 0 0 3px rgba(255, 255, 255, 0.15), inset 0 1px rgba(255, 255, 255, .5);
    }
     65% {
         box-shadow: 0 0 3px rgba(255, 255, 255, 0), inset 0 1px rgba(255, 255, 255, .25);
    }
}

</style>

而且这只发生在网站上，而不是如果我在本地运行这个动画

标签： htmlcsswordpress