Question

Here's看起来如何

.spinner {
       position: absolute;
       top: 35%;
       left: 50%;
       height: 80px;
       width: 80px;
       margin: -40px 0 0 -40px;
       clip: rect(0, 80px, 80px, 40px);
       -webkit-animation: loading 1.5s linear infinite;
       animation: loading 1.5s linear infinite;
       transform-origin: center;

        &:after {
        content:'';
        position: absolute;
        height: 80px;
        width: 80px;
        clip: rect(0, 80px, 80px, 40px);
        border-radius: 50%;
        -webkit-animation: loading2 1.5s ease-in-out infinite;
       animation: loading2 1.5s ease-in-out infinite;
        }
     }

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(220deg);
    transform: rotate(220deg);
  }
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(220deg);
  }
}

@-webkit-keyframes loading2 {
  0% {
    box-shadow: inset #5FA3F3 0 0 0 8px;
    -webkit-transform: rotate(-140deg);
    transform: rotate(-140deg);
  }
  50% {
    box-shadow: inset #2771C9 0 0 0 2px;
  }
  100% {
    box-shadow: inset #5FA3F3 0 0 0 8px;
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
  }
}
@keyframes loading2 {
  0% {
    box-shadow: inset #5FA3F3 0 0 0 8px;
    -webkit-transform: rotate(-140deg);
    transform: rotate(-140deg);
  }
  50% {
    box-shadow: inset #2771C9 0 0 0 2px;
  }
  100% {
    box-shadow: inset #5FA3F3 0 0 0 8px;
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
  }
}

在Firefox（版本42.0）上，微调器有时会断断续续，我相信这可能是因为剪切的矩形在其转换结束时是动画和旋转的。我不确定如何解决这个问题，或者是否有更好的方法来实现这个微调器。

有什么想法吗？

Answer 1

试试这个！将其应用于您看到闪烁的元素。

-webkit-transform-style: preserve-3d;

关于保存-3d的一点点： https://css-tricks.com/almanac/properties/t/transform-style/

<强>更新

您提供的示例链接是ease infinite。如果您使用linear infinite，就像您提供的代码一样，我没有看到任何问题。

-webkit-animation: loading 1.5s linear infinite;

我试图将其从线性修改为轻松，http://codepen.io/pksunkara/pen/gbejPv，这也导致了闪烁的结尾。最好的方法是修复单色。

Answer 2

尝试为微调器添加z-index: 1。当使用bootstrap 4微调器时，它对我有用。

由CSS剪辑引起的闪烁微调器？

2 个答案: