Question

我正在使用CSS Loaders，但使用transform: translate(-50%, -50%)在div对齐的中心内。

请注意，动画正在使用box-shadow。

问题：动画圈子在展开时会从底部切断。

我尝试过：如果我通过增加font-size来增加圆圈的大小，则截止值会减小，即如果我将字体大小更改为15 px，则截止几乎会消失。

当我在堆栈溢出代码片段中尝试使用JS Fiddle中的相同代码时，错误没有发生，如下所示！

＆＃13;

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .loader:before,
    .loader:after,
    .loader {
      border-radius: 50%;
      width: 2.5em;
      height: 2.5em;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation: load7 1.8s infinite ease-in-out;
      animation: load7 1.8s infinite ease-in-out;
    }
    .loader {
      color: #f00;
      font-size: 2px;
      margin: 20px auto;
      position: relative;
      text-indent: -9999em;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    .loader:before {
      left: -3.5em;
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .loader:after {
      left: 3.5em;
    }
    .loader:before,
    .loader:after {
      content: '';
      position: absolute;
      top: 0;
    }
    @-webkit-keyframes load7 {
      0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }
      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }
    @keyframes load7 {
      0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }
      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }

＆＃13;

<div class="center">
  <div class="loader">Loading...</div>
</div>

＆＃13;

Answer 1

删除true课程上的transform: translateZ(0); 这里没有必要将内容设置为“更多的底部”。

CSS装载机|变革＆amp;盒子阴影动画bug

1 个答案: